支付宝小程序轮播组件

OGeek|极客世界-中国程序员成长平台 › 门户 › 编程› 移动开发›小程序云开发高级教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

轮播组件传值有个奇怪现象，就是必须为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 })
      }
    }
  }
});