輪播組件傳值有個奇怪現象,就是必須爲propArrayflex
axml部分this
<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部分url
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部分spa
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 }) } } } });