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

最新推荐文章于 2022-03-02 18:25:02 发布

原创最新推荐文章于 2022-03-02 18:25:02 发布 · 4.7k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#轮播图 #指示点换数字

微信小程序专栏收录该内容

13 篇文章

订阅专栏

本文分享了一种在微信小程序中手写轮播图数字指示器的小技巧，通过使用span标签替代默认指示点，实现了自定义的UI需求，同时提供了完整的html、js和css代码示例。

首先强调：

轮播大家都会写，所以本文不是什么重难点，只是和大家分享下小技巧

先让大家看看效果：（请大家着重看轮播图右下角）

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要求，所以只能手写。既然轮播数字指示点搞定了，相信其他特殊一点的UI轮播指示点也不在话下，无非都是用css去实现。