zoukankan      html  css  js  c++  java
  • 微信小程序 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 () {
    
      }
    })

  • 相关阅读:
    Android之Parcel
    Android常用的IPC通信
    Android之Surface绘制原理
    Android之Surface
    Android之SurfaceFlinger服务
    Android Service(服务)
    Android Service进阶之路
    Android之UI线程启动
    Android之Activity显示原理
    python17-Django进阶
  • 原文地址:https://www.cnblogs.com/xiaoxiao2017/p/10383870.html
Copyright © 2011-2022 走看看