微信小程序使用swiper組件實現類3D輪播圖
更新時間：2018年08月29日 08:37:25 作者：ZJW0215
在寫微信小程序時，有寫到實現3D輪播圖的效果，可以直接使用微信小程序中自帶的組件swiper來實現。下面通過實例代碼給大家介紹微信小程序輪播圖的實現方法，感興趣的朋友一起看看吧
Swiper是純javascript打造的滑動特效插件，面向手機、平板電腦等移動終端。
Swiper能實現觸屏焦點圖、觸屏Tab切換、觸屏多圖切換等常用效果。
Swiper開源、免費、穩(wěn)定、使用簡單、功能強大，是架構移動終端網站的重要選擇！
在寫微信小程序時，有寫到實現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輪播圖，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
相關文章
這篇文章主要介紹了JavaScript的變量聲明與聲明提前用法,結合實例形式分析了JavaScript變量聲明與聲明提前相關原理、用法及操作注意事項,需要的朋友可以參考下2019-11-11
wangEditor編輯器失去焦點后仍然可以在原位置插入圖片分析
本文給大家?guī)淼氖且豢罘浅２诲e的富文本編輯器WangEditor，他最大的特點是它在ie6,7,8上都可以做到失去焦點后仍然可以在原位置插入圖片，而且代碼量很少，下面我們就來分析下他是如何實現的呢2015-05-05
這篇文章主要介紹了微信小程序網絡數據請求服務，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習吧2022-10-10
純JavaScript 實現flappy bird小游戲實例代碼
這篇文章主要介紹了純JavaScript 實現flappy bird小游戲實例代碼,b本文分七大步驟給大家介紹,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-09-09
在微信小程序中webview返回鍵是一個非常實用的功能,它允許用戶在嵌入的網頁中返回到上一個頁面,這篇文章主要給大家介紹了微信小程序webview中監(jiān)聽返回按鈕的實現步驟,需要的朋友可以參考下2024-08-08
JavaScript知識點總結(六)之JavaScript判斷變量數據類型
這篇文章主要介紹了JavaScript知識點總結(六)之JavaScript判斷變量數據類型的相關資料，非常不錯具有參考借鑒價值,需要的朋友可以參考下2016-05-05
這篇文章主要介紹了JavaScript基礎——使用Canvas繪圖，Canvas也真的跟現實生活中的畫布非常相似，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2016-11-11
這篇文章主要介紹了JavaScript導航腳本判斷當前導航的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-07-07
在大量的網站都有這樣的功能，當點擊一個按鈕的時候可以復制當前頁面的地址，以此可以方便網站用戶對鏈接的存儲，同時也便于網站的推廣，下面給大家分享具體實現代碼，對js實現點擊按鈕就復制的相關知識感興趣的朋友一起學習吧2015-12-12
一文讓您了解document.forms和document.formName的兼容性分析
今天在代碼中不小心寫了兩個name相同的form表單,然后通過document.forms[formName]形式獲取到的只有第一個表單,然后深入學習了下document.forms[formName]和document.formName的區(qū)別和兼容性2025-03-03