轮播图指示点换成数字，微信小程序

参考url https://blog.csdn.net/qq_36070288/article/details/83538229

后台

data: {

    activeIndex: 0,

    swiperList: [{

      id: 0,

      type: 'image',

      url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big84000.jpg'

    }, {

      id: 1,

      type: 'image',

      url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big84001.jpg',

    }, {

      id: 2,

      type: 'image',

      url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big39000.jpg'

    }, {

      id: 3,

      type: 'image',

      url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg'

    }],

  },

方法

// 自定义的banner图的方法

changeImg(e) {

let that = this

that.activeIndex = e.detail.current

this.setData({

activeIndex: e.detail.current

}),

console.log(that.activeIndex);

},

showLength() {

return this.swiperList.length

},

// 自定义的banner图的方法

前台 wxml

<!-- 轮播图 -->

<view class="banner">

<swiper class="swiper" autoplay="true" circular="true" bindchange="changeImg" >

<block wx:for="{{swiperList}}" wx:key >

<swiper-item class="item">

<image mode="aspectFill" class="slide-image" src="{{item.url}}" />

</swiper-item>

</block>

</swiper>

<span class="item-num" v-if="showLength>1">{{activeIndex+1}}/{{swiperList.length}}</span>

</view>

<!-- 轮播图 -->

样式文件 wxss

/* pages/goodsdetails/index.wxss */

/* 商品详情页 */

.swiper {

height: 500rpx;

width: 100%;

}

.swiper .item {

width: 100%;

height: 100%;

}

.swiper .item image {

width: 100%;

height: 100%;

display: block;

}

.banner {

position: relative;

}

.banner .item-num {

z-index: 9;

position: absolute;

bottom: 20rpx;

right: 20rpx;

background: rgba(0, 0, 0, 0.5);

padding: 0 22rpx;

height: 40rpx;

line-height: 40rpx;

border-radius: 20rpx;

font-size: 24rpx;

color: rgba(255, 255, 255, 0.75);

}