微信小程swiper元件實作圖片輪播切換功能教學-小程式開發-PHP中文網

微信小程swiper元件實作圖片輪播切換功能教學

小云云

發布： 2017-12-13 09:35:13

原創

3385 人瀏覽過

本文主要介紹了微信小程使用swiper元件實現圖片輪播切換顯示功能,涉及swiper組件相關屬性使用技巧,希望能幫助到大家。

1、效果顯示

2、關鍵程式碼

index.wxml：

<swiper indicator-dots="true"autoplay="true" interval="3000" duration="600" style="height:300px;">
 <swiper-item>
 <image src="../../pages/images/img1.png" style="display: block;height: 300px;"/>
 </swiper-item>
 <swiper-item>
 <image src="../../pages/images/img2.png" style="display: block;height: 300px;"/>
 </swiper-item>
 <swiper-item>
 <image src="../../pages/images/img3.png" style="display: block;height: 300px;"/>
 </swiper-item>
</swiper>

登入後複製

swiper元件屬性說明如下：

屬性名稱	類型	預設值	說明	最低版本
indicator-dots	Boolean	#false	是否顯示面板指示點
indicator-color	Color	rgba(0, 0, 0, .3)	指示點顏色	1.1.0
indicator-active-color	Color	#000000	目前選取的指示點顏色	1.1.0
autoplay	Boolean	false	#是否自動切換
				############################ #current######Number######0######目前所在頁面的index#########
interval	Number	5000	自動切換時間間隔
duration	Number	#500	#滑動動畫時長
circular	Boolean	false	是否採用銜接滑動
				##################################### ########vertical######Boolean######false#######滑動方向是否為縱向#########
bindchange	EventHandle		#current 改變時會觸發change 事件，event.detail = {current: current, source: source}