小程序修改swiper小圆点

<view class='hot-box'>
    <view class='hot-header'>
      <view class='header-e'>GLOTHINGview>
      <view class='header-c'>热门view>
    view>
    <view class="dots">
      <block wx:for="{{img}}" wx:key="unique">
        <view class="dot{{index == swiperCurrent ? ' active' : ''}}">view>
      block>
    view>
    <view class='hot-swiper'>
      <swiper class='swiper' circular current="{{swiperCurrent}}" bindchange="swiperChange" class="swiper">
        <block wx:for="{{img}}" wx:key="{{*this}}">
          <swiper-item>
            <image src="{{item.src}}" class="slide-image" />
          swiper-item>
        block>
      swiper>
    view>
  view>

.hot-box .wx-swiper{
  background-color: #000;
}
.hot-box .dots{
  display: flex;
  justify-content: center;
  margin-bottom: 50rpx;
}
.hot-box .dots .dot{
  margin: 0 8rpx;
  width: 14rpx;
  height: 14rpx;
  background: #fff;
  border-radius: 8rpx;
  background-color: #b0b0b0;
}
.hot-box .dots .dot.active{
  width: 14rpx;
  background: #000;
}

//index.js
//获取应用实例
const app = getApp()

Page({
  data: {
    img: [{
        "src": 'https://upload-images.jianshu.io/upload_images/12893060-11b6be97a02c1e5c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240'
      },
      {
        "src": 'https://upload-images.jianshu.io/upload_images/12893060-11b6be97a02c1e5c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240'
      },
      {
        "src": 'https://upload-images.jianshu.io/upload_images/12893060-11b6be97a02c1e5c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240'
      }
    ],
    swiperCurrent: 0,
  },
  onLoad: function() {

  },
  swiperChange: function(e) {
    this.setData({
      swiperCurrent: e.detail.current
    })
  }
})

就是模拟一个。

参考  https://blog.csdn.net/rorntuck7/article/details/54378963

转载于:https://www.cnblogs.com/baifubin/p/9343133.html