uni-app切片工具-uni-app小程序swiper显示图片计数和当前/总数
1.先在切片软件中切出相应的图片切换代码
2.刷新，生成，导出，在导出的文件里面按如下代码进行手工调整：
wxml中：
<view class="swiperContainer">
<swiper bindchange="swiperChange" autoplay="{{autoplay}}" duration="{{duration}}" style='height: 380rpx;'>
<block wx:for="{{imgUrls}}" wx:key="*this">
<swiper-item wx:key="*this">
<image src="{{item}}" class="slide-image" class='img' />
</swiper-item>
</block>
</swiper>
<view class="imageCount">{{current+1}}/{{imgUrls.length}}</view>
</view>
wxss中：
.swiperContainer {
position: relative;
}
.img {
width: 100%;
height:100%;
}
.imageCount {
width:120rpx;
height:50rpx;
background-color: rgba(0, 0, 0, 0.3);
border-radius:40rpx;
line-height:50rpx;
color:#fff;
text-align:center;
font-size:26rpx;
position:absolute;
left:13px;
bottom:20rpx;
}
JS中：
Page({
data: {
duration:"500",
imgUrls: [ 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/b51889744910df7979a2f672434da84e.jpg?thumb=1&w=720&h=360', 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/37dfdc929ee9a4313facb0b23ebcd721.jpg?thumb=1&w=720&h=360', 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/a0ff3dc30027f3b615bfe03f1d306ee5.jpg?thumb=1&w=720&h=360', 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/2320573b3be643e29f5270a97e1a9c1d.jpg?thumb=1&w=720&h=360' ],
current: 0 },
swiperChange: function (e) { var that = this; if (e.detail.source == 'touch') {
that.setData({
current: e.detail.current
})
}
},
onLoad: function (options) { var that = this;
},
onReady: function () {
},
onShow: function () {
}, /**
* 用户点击右上角分享 */ onShareAppMessage: function () {
}
})