微信小程序-swiper视图组件

<!--index.wxml-->  
<swiper indicator-dots='{{indicatorDots}}' autoplay='{{autoplay}}' duration='{{duration}}'>  
 <block wx:for="{{imgUrls}}">   
   <swiper-item>  
      <!-- 这部分跟例程有区别-->  
      <image src="{{item}}"   style="width:355px ; height:150px" />  
   </swiper-item>  
 </block>  
</swiper>  
  
<button bindtap='changeIndicatorDots'> Indicator-dots </button>  
<button bindtap='changeAutoplay'> autoplay </button>  
<slider bindtap='intvervalChange' show-value min='500' max='2000'>interval</slider>  
<slider bindtap='durationChange'  show-value min='1000' max='10000'>duration</slider>

// pages/index/index.js
Page({
/**
* 页面的初始数据
*/
data: {
imgUrls: [
‘http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg’,
‘http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg’,
‘http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg’
],
indicatorDots: false,
autoplay: false,
interval: 5000,
duration: 1000
},

changeIndicatorDots: function (e) {
this.setData({
indicatorDots: !this.data.indicatorDots
})
},
changeAutoplay: function (e) {
this.setData({
autoplay: !this.data.autoplay
})
},

intvervalChange: function (e) {
this.setData({
interval: e.detail.value
})
},
durationChange: function (e) {
this.setData({
duration: e.detail.value
})
},

})


1,021 Comments