快捷導(dǎo)航

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

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

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

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

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

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

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

效果圖如下：

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

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

這里主要利用了circular實(shí)現(xiàn)無(wú)限滾動(dòng)，然后再加上前后間距，再設(shè)置圖片的層級(jí)和透明度就可以實(shí)現(xiàn)了,將圖片及容器的高度設(shè)置好就差不多可以實(shí)現(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) {
 
 },
 /* 這里實(shí)現(xiàn)控制中間凸顯圖片的樣式 */
 handleChange: function(e) {
 this.setData({
 currentIndex: e.detail.current
 })
 },
})

總結(jié)

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

您可能感興趣的文章: