微信小程序自定義輪播圖
更新時間：2018年11月04日 10:25:20 作者：rorntuck7
這篇文章主要為大家詳細介紹了微信小程序自定義輪播圖，swiper dots默認(rèn)樣式修改，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了微信小程序自定義輪播圖展示的具體代碼，供大家參考，具體內(nèi)容如下
默認(rèn)的swiper面板指示點都是小圓點黑灰的，但這滿足不了廣大小伙伴需求，比如其他顏色的，橢圓形的，方形的等等。
首先當(dāng)然是要禁用掉（直接刪掉）swiper屬性indicator-dots，再用view組件模擬dots，對應(yīng)的代碼如下：
<view class="swiper-container">
<swiper autoplay="auto" interval="5000" duration="500" current="{{swiperCurrent}}" bindchange="swiperChange" class="swiper">
<block wx:for="{{slider}}" wx:key="unique">
<swiper-item>
<image src="{{item.picUrl}}" class="img"></image>
</swiper-item>
</block>
</swiper>
<view class="dots">
<block wx:for="{{slider}}" wx:key="unique">
<view class="dot{{index == swiperCurrent ? ' active' : ''}}"></view>
</block>
</view>
</view>
然后是wxss代碼：
swiper-container{
position: relative;
}
.swiper-container .swiper{
height: 300rpx;
}
.swiper-container .swiper .img{
width: 100%;
height: 100%;
}
.swiper-container .dots{
position: absolute;
left: 0;
right: 0;
bottom: 20rpx;
display: flex;
justify-content: center;
}
.swiper-container .dots .dot{
margin: 0 8rpx;
width: 14rpx;
height: 14rpx;
background: #fff;
border-radius: 8rpx;
transition: all .6s;
}
.swiper-container .dots .dot.active{
width: 24rpx;
background: #f80;
}
再對swiper的bindchange屬性綁定對應(yīng)的事件：
Page({
data: {
slider: [
{picUrl: '../../images/T003R720x288M000000rVobR3xG73f.jpg'},
{picUrl: '../../images/T003R720x288M000000j6Tax0WLWhD.jpg'},
{picUrl: '../../images/T003R720x288M000000a4LLK2VXxvj.jpg'},
],
swiperCurrent: 0,
},
swiperChange: function(e){
this.setData({
swiperCurrent: e.detail.current
})
}
})
效果圖：
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細介紹了原生js實現(xiàn)簡單輪播圖，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-10-10
這篇文章主要介紹了js實現(xiàn)文章文字大小字號功能的實現(xiàn)方法,可根據(jù)用戶習(xí)慣調(diào)整顯示文字的大小.詳細講述了實現(xiàn)這一功能的完整步驟.是非常實用的技巧,需要的朋友可以參考下2014-11-11
本文主要介紹了JS中phototype的相關(guān)知識。具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
這篇文章主要介紹了es6數(shù)值的擴展方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
這篇文章主要介紹了java和js實現(xiàn)的洗牌小程序,代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2019-09-09
javascript在網(wǎng)頁中實現(xiàn)讀取剪貼板粘貼截圖功能
這篇文章主要介紹了在網(wǎng)頁中實現(xiàn)讀取剪貼板粘貼截圖功能,即可以把剪貼板的截圖Ctrl+V粘貼到網(wǎng)頁的一個輸入框中,例如QQ截圖、旺旺截圖或者其它截圖軟件,需要的朋友可以參考下2014-06-06
這篇文章主要為大家詳細介紹了js實現(xiàn)時分秒倒計時，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-12-12
每天都有大量網(wǎng)友申請加入我的團隊，于是審核團隊新成員成了一個費力氣的活兒，在此情況下，我寫了個腳本，自動計算他們的回答采納率，采納率低于20%的自動打勾 選中，等級太低的人也自動打勾選中2014-02-02
JS實現(xiàn)的另類手風(fēng)琴效果網(wǎng)頁內(nèi)容切換代碼
這篇文章主要介紹了JS實現(xiàn)的另類手風(fēng)琴效果網(wǎng)頁內(nèi)容切換代碼,通過JavaScript響應(yīng)鼠標(biāo)事件動態(tài)操作頁面元素樣式屬性實現(xiàn)手風(fēng)琴效果,具有一定參考借鑒價值,需要的朋友可以參考下2015-09-09
這篇文章主要介紹了Javascript中的高階函數(shù)介紹,本文講解了什么是高階函數(shù)、Javascript的高階函數(shù)、還原高階函數(shù)、高階函數(shù)使用實例等內(nèi)容,需要的朋友可以參考下2015-03-03