在微信小程如何使用swiper元件實現圖片切換顯示-js教程-PHP中文網

在微信小程如何使用swiper元件實現圖片切換顯示

亚连

發布： 2018-06-21 11:57:40

原創

2083 人瀏覽過

這篇文章主要介紹了微信小程使用swiper元件實現圖片輪播切換顯示功能,涉及swiper元件相關屬性使用技巧,並附帶源碼供讀者下載參考,需要的朋友可以參考下

#本文實例講述了微信小程使用swiper元件實現圖片輪播切換顯示功能。分享給大家供大家參考，具體如下：

關鍵程式碼

#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-color######Color######rgba(0, 0, 0, .3)######指示點顏色####### 1.1.0########1.1.0autoplayBooleanfalse是否自動切換###

屬性名稱	類型	預設值
indicator-dots	Boolean	#false	是否顯示面板指示點

indicator-active-color	Color	#000000	目前選取的指示點顏色

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}