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

這篇文章主要介紹了微信小程使用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}

#上面是我整理給大家的，希望今後對大家有幫助。

相關文章：

有關ES6/JavaScript使用技巧（詳細教學）

在nodejs中如何實作爬取網站圖片

有關JS抽象工廠模式（詳細教學）

#在Django與Vue語法中存在衝突問題如何解決

以上是在微信小程如何使用swiper元件實現圖片切換顯示的詳細內容。更多資訊請關注PHP中文網其他相關文章！