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

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

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

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

推薦度：

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

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

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 是否顯示小圓點，也可以自己重新設(shè)置小圓點

circular 是否銜接滑動，就是實現(xiàn)無限滾動

previous-margin 與上一張圖片的間距

next-margin 與下一張圖片的間距

autoplay 實現(xiàn)自動滾動

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

總結(jié)

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

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

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

推薦度：

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

標簽：微信小程序使用微信小程序 swi

熱門焦點

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

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

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

最新推薦

猜你喜歡

熱門推薦