小程序swiper组件修改默认指示点

html

<view class="swiper-container">
    <swiper autoplay="auto" 
      autoplay="{{autoplay}}" 
      interval="{{interval}}" 
      duration="{{duration}}" 
      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 data-i='{{index}}' bindtap='fn' class="dot{{index == swiperCurrent ? ' active' : ''}}"></view>
      </block>
    </view>
  </view>

js

const app = getApp()
Page({
  data: {
    slider: [{
        picUrl: '../../images/icon-swiper1.jpg'
      },
      {
        picUrl: '../../images/icon-swiper2.jpg'
      },
      {
        picUrl: '../../images/icon-swiper3.jpeg'
      },
      {
        picUrl: '../../images/icon-swiper4.jpg'
      },
    ],
    windowHeight: "",
    windowWidth: "",
    swiperCurrent: 0,
    autoplay: true,
    interval: 5000,
    duration: 500,
    windowWidth: wx.getSystemInfoSync().windowWidth
  },
 
  fn(e) {
    this.setData({
      swiperCurrent: e.currentTarget.dataset.i
    })
    console.log(e)
  },
  swiperChange: function(e) {
    // console.log(e)
    this.setData({
      swiperCurrent: e.detail.current
    })
  },


})

css

.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: #41B883;
}

有帮助到大家的关注我

会一直更新小程序常用技术及新玩法。

 

喜欢上方小程序,需要源码的,添加博主微信私信小编.