<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 { 100%;
height:100%; } .imageCount { 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 () { } })