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


<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 () {

  }
})


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM