屬性名	類型	默認(rèn)值	說明
indicator-dots	Boolean	false	是否顯示面板指示點(diǎn)
autoplay	Boolean	false	是否自動切換
current	Number	0	當(dāng)前所在頁面的index
interval	Number	5000	自動切換時(shí)間間隔
duration	Number	1000	滑動動畫時(shí)長
bindchange	EventHandle		current改變時(shí)會觸發(fā)change事件，event.detail={current:current}

注意：其中只可放置swiper-item組件，其他節(jié)點(diǎn)會被自動刪除

swiper-item

僅可放置在swiper組件中，寬高自動設(shè)置為100%

示例代碼：

<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="durationChange" 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
 })
 },
 durationChange: function(e) {
 this.setData({
  duration: e.detail.value
 })
 }
})

感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！

您可能感興趣的文章: