微信小程序 swiper 显示图片计数 当前/总数

<view class="swiperContainer">
    <swiper bindchange="swiperChange" indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
        <block wx:for="{{imgUrls}}" wx:key="*this">
            <swiper-item>
                <image src="{{item}}" class="slide-image" mode="center"/>
            </swiper-item>
        </block>
    </swiper>
    <view class="imageCount">{{current+1}}/{{imgUrls.length}}</view>
</view>

把swiper和计数的view放在一个容器view中, swiper加bindchange事件, 获取当前图片的索引, 当前图片索引+1/图片数组长度, 计数view绝对定位

.swiperContainer{
    position: relative;
}
.imageCount{
    width: 80rpx;
    height: 80rpx;
    background-color: #c5c5cc;
    border-radius: 50%;
    line-height: 78rpx;
    color: #ffffff;
    text-align: center;
    font-size: 26rpx;
    position: absolute;
    right: 26rpx;
    bottom:20rpx;
}

猜你喜欢

转载自blog.csdn.net/qq_40095973/article/details/80510881