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 })
          }
        }
      }
    });
  • 相关阅读:
    中科院大牛博士是如何进行文献检索和阅读(好习惯受益终生)(转载)
    大家平常都喜欢看哪些人的博客,共享…… ZZ (水木)
    heart ultrasound from american society of echocardiography
    用TWaver实现组合的Chart
    Hello TWaver Android
    关注细节-TWaver Android
    TWaver Java内存占用测试
    TWaver Android 概述
    机器学习中的相似性度量
    最大熵模型(一)
  • 原文地址:https://www.cnblogs.com/fms-3/p/10180356.html
Copyright © 2011-2022 走看看