微信小程序自定義輪播圖

2020-03-21 16:08:05

字體：大中小

供稿：網(wǎng)友

本文實例為大家分享了微信小程序自定義輪播圖展示的具體代碼，供大家參考，具體內(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 })}})

效果圖：

微信小程序,輪播圖