微信小程序使用swiper組件實現(xiàn)類3D輪播圖

更新時間：2018年08月29日 08:37:25 作者：ZJW0215

在寫微信小程序時，有寫到實現(xiàn)3D輪播圖的效果，可以直接使用微信小程序中自帶的組件swiper來實現(xiàn)。下面通過實例代碼給大家介紹微信小程序輪播圖的實現(xiàn)方法，感興趣的朋友一起看看吧

Swiper是純javascript打造的滑動特效插件，面向手機、平板電腦等移動終端。

Swiper能實現(xiàn)觸屏焦點圖、觸屏Tab切換、觸屏多圖切換等常用效果。

Swiper開源、免費、穩(wěn)定、使用簡單、功能強大，是架構(gòu)移動終端網(wǎng)站的重要選擇！

在寫微信小程序時，有寫到實現(xiàn)3D輪播圖的效果，可以直接使用微信小程序中自帶的組件swiper來實現(xiàn)

效果圖如下：

1.swiper的相關(guān)屬性

indicator-dots 是否顯示小圓點，也可以自己重新設置小圓點
circular 是否銜接滑動，就是實現(xiàn)無限滾動
previous-margin 與上一張圖片的間距
next-margin 與下一張圖片的間距
autoplay 實現(xiàn)自動滾動

這里主要利用了circular實現(xiàn)無限滾動，然后再加上前后間距，再設置圖片的層級和透明度就可以實現(xiàn)了,將圖片及容器的高度設置好就差不多可以實現(xiàn)了

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) {
 
 },
 /* 這里實現(xiàn)控制中間凸顯圖片的樣式 */
 handleChange: function(e) {
 this.setData({
 currentIndex: e.detail.current
 })
 },
})

總結(jié)

以上所述是小編給大家介紹的微信小程序使用swiper組件實現(xiàn)類3D輪播圖，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章: