微信小程使用swiper組件實(shí)現(xiàn)圖片輪播切換顯示功能【附源碼下載】
更新時(shí)間：2017年12月12日 10:01:08 作者：FutrueJet
這篇文章主要介紹了微信小程使用swiper組件實(shí)現(xiàn)圖片輪播切換顯示功能,涉及swiper組件相關(guān)屬性使用技巧,并附帶源碼供讀者下載參考,需要的朋友可以參考下
本文實(shí)例講述了微信小程使用swiper組件實(shí)現(xiàn)圖片輪播切換顯示功能。分享給大家供大家參考，具體如下：
1、效果展示
2、關(guān)鍵代碼
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組件屬性說(shuō)明如下：
| 屬性名 | 類型 | 默認(rèn)值 | 說(shuō)明 | 最低版本 |
|---|---|---|---|---|
| indicator-dots | Boolean | false | 是否顯示面板指示點(diǎn) | |
| indicator-color | Color | rgba(0, 0, 0, .3) | 指示點(diǎn)顏色 | 1.1.0 |
| indicator-active-color | Color | #000000 | 當(dāng)前選中的指示點(diǎn)顏色 | 1.1.0 |
| autoplay | Boolean | false | 是否自動(dòng)切換 | |
| current | Number | 0 | 當(dāng)前所在頁(yè)面的 index | |
| interval | Number | 5000 | 自動(dòng)切換時(shí)間間隔 | |
| duration | Number | 500 | 滑動(dòng)動(dòng)畫(huà)時(shí)長(zhǎng) | |
| circular | Boolean | false | 是否采用銜接滑動(dòng) | |
| vertical | Boolean | false | 滑動(dòng)方向是否為縱向 | |
| bindchange | EventHandle | current 改變時(shí)會(huì)觸發(fā) change 事件，event.detail = {current: current, source: source} |
3、源代碼點(diǎn)擊此處本站下載。
關(guān)于swiper詳細(xì)說(shuō)明還可參考官方文檔：https://mp.weixin.qq.com/debug/wxadoc/dev/component/swiper.html
希望本文所述對(duì)大家微信小程序開(kāi)發(fā)有所幫助。
相關(guān)文章
JS中圖片緩沖loading技術(shù)的實(shí)例代碼
這篇文章介紹了JS中圖片緩沖loading技術(shù)的實(shí)例代碼，有需要的朋友可以參考一下2013-08-08
JavaScript函數(shù)的4種調(diào)用方法詳解
了解函數(shù)的調(diào)用過(guò)程有助于深入學(xué)習(xí)與分析JavaScript代碼。本文是JavaScript高級(jí)這個(gè)系列中的第三篇文章，主要介紹JavaScript中函數(shù)的四種使用形式2014-04-04
基于OL2實(shí)現(xiàn)百度地圖ABCD marker的效果
2015-10-10
uni-app微信小程序登錄并使用vuex存儲(chǔ)登錄狀態(tài)的思路詳解
這篇文章主要介紹了uni-app微信小程序登錄并使用vuex存儲(chǔ)登錄態(tài)的思路，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-11-11
今天在編碼時(shí)，遇到一個(gè)問(wèn)題，特記錄下。希望對(duì)朋友有所幫助。2010-12-12
如何在webpack項(xiàng)目中調(diào)試loader插件
最近在學(xué)習(xí)webpack，本文主要介紹了loader插件的調(diào)試方法，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-06-06
引入JavaScript時(shí)alert彈出框顯示中文亂碼問(wèn)題
今天在HTML中引入JavaScript文件運(yùn)行時(shí)，alert彈出的提示框中文顯示為亂碼，怎么解決此問(wèn)題呢？下面小編給大家?guī)?lái)了引入JavaScript時(shí)alert彈出框顯示中文亂碼問(wèn)題的解決方法，一起看看吧2017-09-09
js中判斷數(shù)字\字母\中文的正則表達(dá)式 (實(shí)例)
js中判斷數(shù)字\字母\中文的正則表達(dá)式，需要的朋友可以參考下2012-06-06
前端防止用戶重復(fù)提交js實(shí)現(xiàn)代碼示例
這篇文章主要給大家介紹了關(guān)于前端防止用戶重復(fù)提交js實(shí)現(xiàn)的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起看看吧2018-09-09
動(dòng)態(tài)添加js事件實(shí)現(xiàn)代碼
動(dòng)態(tài)添加js事件，主要是不用具體指定位置的事件，這種動(dòng)態(tài)添加事件的方法比較方便，并可以擴(kuò)展等。2009-03-03