微信小程序自定義輪播圖
更新時(shí)間：2018年11月04日 10:25:20 作者：rorntuck7
這篇文章主要為大家詳細(xì)介紹了微信小程序自定義輪播圖，swiper dots默認(rèn)樣式修改，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了微信小程序自定義輪播圖展示的具體代碼，供大家參考，具體內(nèi)容如下
默認(rèn)的swiper面板指示點(diǎn)都是小圓點(diǎn)黑灰的，但這滿足不了廣大小伙伴需求，比如其他顏色的，橢圓形的，方形的等等。
首先當(dāng)然是要禁用掉（直接刪掉）swiper屬性indicator-dots，再用view組件模擬dots，對(duì)應(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;
}
再對(duì)swiper的bindchange屬性綁定對(duì)應(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
})
}
})
效果圖：
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
微信小程序webview組件交互,內(nèi)聯(lián)h5頁面并網(wǎng)頁實(shí)現(xiàn)微信支付實(shí)現(xiàn)解析
這篇文章主要介紹了小程序webview組件交互,內(nèi)聯(lián)h5頁面并網(wǎng)頁實(shí)現(xiàn)微信支付實(shí)現(xiàn)解析,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-08-08
javascript函數(shù)的四種調(diào)用模式
本文詳細(xì)介紹了javascript函數(shù)的四種調(diào)用模式。具有一定的參考價(jià)值，下面跟著小編一起來看下吧2017-01-01
JS實(shí)現(xiàn)簡(jiǎn)單抖動(dòng)效果
這篇文章給大家結(jié)束了通過js實(shí)現(xiàn)抖動(dòng)效果，非常不錯(cuò)，具有參考借鑒價(jià)值，感興趣的朋友參考下吧2017-06-06
顯示js對(duì)象所有屬性和方法，從網(wǎng)上整理了不少，大家可以看下原理都是差不多的。2009-10-10
bootstrap中模態(tài)框、模態(tài)框的屬性實(shí)例詳解
這篇文章主要介紹了bootstrap中模態(tài)框、模態(tài)框的屬性實(shí)例詳解,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-02-02
這篇文章主要介紹了JavaScript錯(cuò)誤捕獲的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)使用JavaScript，感興趣的朋友可以了解下2021-04-04
iframe中子父類窗口調(diào)用JS的方法及注意事項(xiàng)
本文給大家介紹iframe中子父類窗口調(diào)用JS的方法及注意事項(xiàng)，介紹的超詳細(xì)，需要的朋友快來學(xué)習(xí)下2015-08-08
微信小程序分享功能onShareAppMessage(options)用法分析
這篇文章主要介紹了微信小程序分享功能onShareAppMessage(options)用法,結(jié)合具體實(shí)例形式分析了微信小程序分享功能onShareAppMessage(options)具體使用技巧與相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2019-04-04
關(guān)于function類中定義變量this的簡(jiǎn)單說明
下面小編就為大家?guī)硪黄P(guān)于function類中定義變量this的簡(jiǎn)單說明。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-05-05
JavaScript實(shí)現(xiàn)多文件拖動(dòng)上傳功能
這篇文章主要為大家詳細(xì)介紹了如何使用JavaScript實(shí)現(xiàn)多文件拖動(dòng)上傳功能,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-04-04