版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_36070288/article/details/83538229
首先强调:
轮播大家都会写,所以本文不是什么重难点,只是和大家分享下小技巧
先让大家看看效果:(请大家着重看轮播图右下角)
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>