zoukankan      html  css  js  c++  java
  • 支付宝小程序轮播组件

    轮播组件传值有个奇怪现象,就是必须为propArray

    axml部分

    <view class="swiper-container">
      <swiper indicator-dots="{{indicatorDots}}" interval="{{interval}}" duration="{{duration}}" circular="{{duration}}"
       onChange="swiperChange" class="swiper" autoplay="{{autoplay}}">
        <block a:for="{{propArray}}" a:key="unique">
          <swiper-item>
            <image src="{{item.imgs}}" data-link="{{item.link}}" class="img" onTap="swipclick"  />
          </swiper-item>
        </block>
      </swiper>
      <view class="dots">
        <block a:for="{{propArray}}" a:key="unique">
          <view class="dot{{index == swiperCurrent ? ' active' : ''}}" data-id="{{item.id}}" onTap="chuangEvent"></view>
        </block>
      </view>
    </view>

    acs部分

    swiper {
        height:485rpx;
    }
    swiper-item image {
        width: 100%;
        height: 100%;
    }
    .swiper-container{
      position: relative;
    }
    .swiper-container .swiper{
      height:485rpx;
    }
    .swiper-container .swiper .img{
      width: 100%;
    }
    /* 轮播小点 */
    .dots{ 
      position: absolute; 
      left: 0; 
      right: 0; 
      bottom: 20rpx; 
      display: flex; 
      justify-content: center; 
    } 
    .dots .dot{ 
      margin: 0 8rpx; 
      width: 10rpx; 
      height: 6rpx; 
      background: #ddd; 
      border-radius: 8rpx; 
      transition: all .6s; 
    } 
    .dots .dot.active{ 
      width: 22rpx;
      background: #1888f0; 
    }

    js部分

    Component({
      mixins: [],
      props: {
        propArray: {
          type: Array,
          value: ''
        },
        links:{
          type: Array,
          value: ''
        }
      },
    
      data: {
        imgsbox: [],
        swiperCurrent: 0,
        autoplay: true,
        interval: 3000,
        duration: 800,
        circular: true,
        // 将轮播图组件自带的小点隐藏
        indicatorDots: false,
      },
      didMount() { },
      didUpdate() {
        this.setData({
          imgsbox: this.props.imgUrls
        })
      },
      didUnmount() { },
      /**
         * 组件的方法列表
         */
      methods: {
      //轮播图的切换事件
        swiperChange: function(e) {
          this.setData({
            swiperCurrent: e.detail.current
          })
        },
        //点击指示点切换
        chuangEvent: function(e) {
          this.setData({
            swiperCurrent: e.currentTarget.id
          })
        },
        //点击图片触发事件
        swipclick: function(e) {
          var link = e.target.dataset.link;
          if (link == "" || link==null){
            return false;
          }else{
            my.navigateTo({ url: link })
          }
        }
      }
    });
  • 相关阅读:
    支持stl容器的gdb自定义命令
    Thrift辅助类,用于简化Thrift编程
    Linux上获取CPU Core个数的实现
    第54课 被遗弃的多重继承(下)
    第53课 被遗弃的多重继承(上)
    第52课 C++中的抽象类和接口
    第51课 C++对象模型分析(下)
    第50课 C++对象模型分析(上)
    第49课 多态的概念和意义
    第48课 同名覆盖引发的问题
  • 原文地址:https://www.cnblogs.com/fms-3/p/10180356.html
Copyright © 2011-2022 走看看