微信小程序實現類3D輪播圖

在寫微信小程序時，有寫到實現3D輪播圖的效果，能夠直接使用微信小程序中自帶的組件swiper來實現

• 效果圖以下：

1.swiper的相關屬性

• indicator-dots 是否顯示小圓點，也能夠本身從新設置小圓點
• circular 是否銜接滑動，就是實現無限滾動
• previous-margin 與上一張圖片的間距
• next-margin 與下一張圖片的間距
• autoplay 實現自動滾動

這裏主要利用了circular實現無限滾動，而後再加上先後間距，再設置圖片的層級和透明度就能夠實現了,將圖片及容器的高度設置好就差很少能夠實現了

• wxml文件

<!--carousel/index.wxml-->
<swiper class="imageContainer" bindchange="handleChange" previous-margin="50rpx" next-margin="50rpx" circular autoplay>
  <block wx:for="{{3}}" wx:key="{{index}}">
    <swiper-item class="item">
      <image class="itemImg {{currentIndex == index ? 'active': ''}}" src="../../../image/3.jpg"></image>
    </swiper-item>
  </block>
</swiper>

• wxss文件

/* carousel/index.wxss */
page{
  background: #f7f7f7f7;
}
.imageContainer{
  width: 100%;
  height: 500rpx;
  background: #000;
}
.item{
  height: 500rpx;
}
.itemImg{
  position: absolute;
  width: 100%;
  height: 380rpx;
  border-radius: 15rpx;
  z-index: 5;
  opacity: 0.7;
  top: 13%;
}
.active{
  opacity: 1;
  z-index: 10;
  height: 430rpx;
  top: 7%;
  transition:all .2s ease-in 0s;
}

• JS文件

// carousel/index.js
Page({

  data: {
    currentIndex: 0
  },

  onLoad: function (options) {
  
  },
  /* 這裏實現控制中間凸顯圖片的樣式 */
  handleChange: function(e) {
    this.setData({
      currentIndex: e.detail.current
    })
  },
})

正在努力學習中，若對你的學習有幫助，留下你的印記唄（點個贊咯^_^）

• 往期好文推薦：

  • 畫三角形
  • webpack打包（有面試題）
  • setInterval與setTimeout