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

  • 相关阅读:
    requirejs 加载其它js
    springmvc 国际化
    企业QQ客服的添加
    js验证身份证号码
    JQUERY获取当前页面的URL信息
    lnmp、lamp、lnmpa一键安装包(Updated: 2015-10-25)
    php生成代金券码
    JS控制文本框textarea输入字数限制的方法
    ps 换图片的背景颜色
    读取数据库配置文件
  • 原文地址:https://www.cnblogs.com/xiaoxiao2017/p/10383870.html
Copyright © 2011-2022 走看看