小程序模板網(wǎng)

實(shí)用方法:自定義輪播圖swiper dots默認(rèn)樣式

發(fā)布時(shí)間:2018-05-17 08:52 所屬欄目:小程序開發(fā)教程
先吐槽下:
1.更新了v0.12的版本后,每次保存都彈出來一個(gè)打開文件窗口。
2.swiper組件的屬性indicator-dots,值為false時(shí),面板指示點(diǎn)還是顯示。要把indicator-dots屬性直接刪掉。


下面進(jìn)入正題:默認(rèn)的swiper面板指示點(diǎn)都是小圓點(diǎn)黑灰的,但這滿足不了廣大小伙伴需求,比如其他顏色的,橢圓形的,方形的等等。。。。
首先當(dāng)然是要禁用掉(直接刪掉)swiper屬性indicator-dots,再用view組件模擬dots,對應(yīng)的代碼如下:
[HTML] 純文本查看 復(fù)制代碼
?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
<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代碼:
[CSS] 純文本查看 復(fù)制代碼
?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
.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)的事件:
[JavaScript] 純文本查看 復(fù)制代碼
?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
Page({
data: {
    slider: [
    {picUrl: 'http://y.gtimg.cn/music/photo_new/T003R720x288M000000rVobR3xG73f.jpg'},
    {picUrl: 'http://y.gtimg.cn/music/photo_new/T003R720x288M000000j6Tax0WLWhD.jpg'},
    {picUrl: 'http://y.gtimg.cn/music/photo_new/T003R720x288M000000a4LLK2VXxvj.jpg'},
    ......
    ],
    swiperCurrent: 0,
},
swiperChange: function(e){
    this.setData({
        swiperCurrent: e.detail.current
    })
}
})


效果預(yù)覽: 


易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://22321a.com/wxmini/doc/course/24450.html 復(fù)制鏈接 如需定制請聯(lián)系易優(yōu)客服咨詢:800182392 點(diǎn)擊咨詢
QQ在線咨詢