微信小程序自定义指示器(简单易上手)

image.png

1、绑定轮播事件

在wxml绑定事件：

<swiper ... bindchange="swiperFn">
    ...
</swiper>

在js中写事件：

Page({
  ...
  swiperFn(e){
    console.log(e.detail.current);  // 通过事件对象，可以打印出来当前值，表示当前为第几张图
  }
})

2、删除多余属性

wxml中，将 swiper 标签上的 indicator-dots="{{indicatorDots}}" 属性删掉，将js中data里的 indicatorDots: true, 属性删掉。

因为我们打算自定义指示器，因此这两处没有存在的必要。

3、增加指示器

wxml中:

<view class="page-section page-section-spacing swiper">
  <view class="indicator">
    <view wx:for="{{background}}" wx:key="*this" class="{{index==swiperNum ? 'active' : ''}}">          </view>
    </view>
</view>

以上的 class="{{index==swiperNum ? 'active' : ''}}" 是三元运算符写法。

wxss中：

.swiper, swiper, swiper image{
  width: 100%;
  height: 500rpx;
  display: block;
}

.swiper{
  position: relative;
}

.indicator{
  position: absolute;
  right: 20rpx;
  bottom: 20rpx;
}

.indicator view{
  width: 30rpx;
  height: 30rpx;
  background: #ccc;
  border-radius: 30rpx;
  float: left;
  margin-left: 20rpx;
  transition: all 1s linear;
}

.indicator view.active{
  width: 50rpx;
  background: #34399C;
}

js中：

Page({
  data: {
    ...
    autoplay: true,
    swiperNum: 0
  },
  swiperFn(e){
    this.setData({
      swiperNum: e.detail.current
    })
  }
})