• 微信小程序 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 {
       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 () {
    
      }
    })

  • 相关阅读:
    201521123099 《Java程序设计》第6周学习总结
    201521123099《java程序设计》第五周学习总结
    201521123099 《Java程序设计》第3周学习总结
    201521123099 《Java程序设计》第9周学习总结
    201521123099 《Java程序设计》第4周学习总结
    陈敏第一周Java课程总结
    maven常见配置
    使用swagger管理接口
    Reportng配置报告地址
    Testng基本问题
  • 原文地址:https://www.cnblogs.com/xiaoxiao2017/p/10383870.html
Copyright © 2020-2023  润新知