微信小程序使用swiper組件實現類3D輪播圖

來源：懂視網責編：小采時間：2020-11-27 22:08:54

微信小程序使用swiper組件實現類3D輪播圖

微信小程序使用swiper組件實現類3D輪播圖:Swiper是純javascript打造的滑動特效插件，面向手機、平板電腦等移動終端。 Swiper能實現觸屏焦點圖、觸屏Tab切換、觸屏多圖切換等常用效果。 Swiper開源、免費、穩定、使用簡單、功能強大，是架構移動終端網站的重要選擇！在寫微信小程序時，有寫到實現3

推薦度：

點擊下載本文 文檔為doc格式

導讀微信小程序使用swiper組件實現類3D輪播圖:Swiper是純javascript打造的滑動特效插件，面向手機、平板電腦等移動終端。 Swiper能實現觸屏焦點圖、觸屏Tab切換、觸屏多圖切換等常用效果。 Swiper開源、免費、穩定、使用簡單、功能強大，是架構移動終端網站的重要選擇！在寫微信小程序時，有寫到實現3

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

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

Swiper開源、免費、穩定、使用簡單、功能強大，是架構移動終端網站的重要選擇！

在寫微信小程序時，有寫到實現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
 })
 },
})

總結

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

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com