說白了，輪播大家都會寫，所以本文不是什麼重難點，只是和大家分享下小技巧

先讓大家看看效果：（請大家著重看輪播圖右下角）

html相關程式碼：

<template>
    <div class="box" v-if="showLength">
        <swiper class="swiper"
            @change ="changeImg"
            :autoplay="true"
            :circular="true"
            current=0
        >
            <block v-for="(item, index) in imagesUrl" :key="index">
                <swiper-item class="item">
                    <image mode="aspectFill" :src="item" class="slide-image"/>
                </swiper-item>
            </block>
        </swiper>
        <span class="item-num" v-if="showLength>1">{{activeIndex+1}}/{{imagesUrl.length}}</span>
        <span class="item-num" v-else>1/{{imagesUrl.length}}</span>
    </div>
</template>
 

js相關程式碼：

data () {
  return {
    activeIndex: 0,
    imagesUrl: [],

  }
},

computed: {
  showLength () {
    return this.imagesUrl.length
  }
},

methods: {
  changeImg (e) {
    let that = this
    that.activeIndex = e.target.current
  }
}

css相關程式碼：

<style lang="stylus" scoped>
.swiper
    height 500rpx
    width 100%
    .item
        width 100%
        height 100%
        image
            width 100%
            height 100%
            display block
.box
    position relative
    .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 32rpx
        color rgba(255,255,255,0.75)
</style>
 

說白了就是把指示點去掉用一個span標籤來替代

正常情況下我們肯定是用微信小程式自己的元件（swiper）提供的指示點，由於公司UI要求，所以只能手寫