微信小程序之swiper滑动面板用法示例

<swiper class=\"view-item\" indicator-dots=\"true\" autoplay=\"true\">
<swiper-item class=\"bg-green\">
<view >Content</view>
</swiper-item>
<swiper-item class=\"bg-yellow\">
<view >Content</view>
</swiper-item>
<swiper-item class=\"bg-blue\">
<view >Content</view>
</swiper-item>
</swiper>

<swpier indicator-dots=\"{{indicatorDots}}\"
 autoplay=\"{{autoplay}}\" interval=\"{{interval}}\" duration=\"{{duration}}\">
 <block wx:for-items=\"{{imgUrls}}\">
  <swpier-item>
   <image src=\"{{item}}\" class=\"slide-image\" width=\"355\" height=\"150\"/>
  </swpier-item>
 </block>
</swpier>
<button bindtap=\"changeIndicatorDots\"> indicator-dots </button>
<button bindtap=\"changeAutoplay\"> autoplay </button>
<slider bindchange=\"intervalChange\" show-value min=\"500\" max=\"2000\"/> interval
<slider bindchange=\"durati \" show-value min=\"1000\" max=\"10000\"/> duration

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
  })
 },
 intervalChange: function(e) {
  this.setData({
   interval: e.detail.value
  })
 },
 durati : function(e) {
  this.setData({
   duration: e.detail.value
  })
 }
})