輪播圖指示點換成數字,小程式mpvue
阿新 • • 發佈:2018-12-13
首先強調:
輪播大家都會寫,所以本文不是什麼重難點,只是和大家分享下小技巧
先讓大家看看效果:(請大家著重看輪播圖右下角)
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>