轮播图指示点换成数字,小程序mpvue
小程序轮播图指示点换成数字的实现方法
·
首先强调:
轮播大家都会写,所以本文不是什么重难点,只是和大家分享下小技巧
先让大家看看效果:(请大家着重看轮播图右下角)
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去实现。
更多推荐
已为社区贡献6条内容
所有评论(0)