微信在線咨詢 服務時間：9：00-18：00

使用微信掃一掃馬上在線溝通

QQ在線咨詢 服務時間：9：00-18：00

選擇下列產品馬上在線溝通

縱橫售前-老古

QQ:519082853 售前電話:18950029581

縱橫售前-江夏

QQ:576791973 售前電話:19906048602

縱橫售前-小李

QQ:3494196421 售前電話:19906048601

縱橫售前-小智

QQ:2732502176 售前電話:17750597339

縱橫售前-燕子

QQ:609863413 售前電話:17750597993

縱橫值班售后

QQ:407474592 售后電話:400-1886560

縱橫財務

QQ:568149701 售后電話:18965139141

售前咨詢熱線:

400-188-6560

業務姚經理：18950029581

關注

關于縱橫數據 更多優惠活動等您來拿！

掃一掃關注官方微信

微信小程swiper組件實現圖片輪播切換功能

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