<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>
.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;
}
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 () {
}
})
