微信小程序的輪播功能怎么實現-創新互聯

這篇文章主要介紹了微信小程序的輪播功能怎么實現，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

創新互聯建站成立與2013年，是專業互聯網技術服務公司，擁有項目成都網站設計、網站建設、外貿網站建設網站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元崗巴做網站,已為上家服務,為崗巴各地企業和個人服務,聯系電話:18982081108

我們在官網上可以看到輪播相關的說明了，這里是通過一個實例來說明一下微信小程序的輪播功能的實現效果：

先看一下效果圖：

JS代碼：

var app = getApp();
Page({
    data: {
        imgUrls: [
            'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
            'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
            'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
        ],
        indicatorDots: true,
        autoplay: false,
        interval: 5000,
        duration: 1000
    },
    changeIndicatorDots: function(e) {
        this.setData({
            indicatorDots: !this.data.indicatorDots
        })
    },
    changeAutoplay: function(e) {
        this.setData({
            autoplay: !this.data.autoplay
        })
    },
    intervalChange: function(e) {
        this.setData({
            interval: e.detail.value
        })
    },
    durationChange: function(e) {
        this.setData({
            duration: e.detail.value
        })
    },
}）

data中是要設置的數據。indicatorDots設置是否有點，interval設置每隔多少毫秒進行切換，duration設置切換的速度。中對所有的照片進行遍歷。這些值通過data然后在函數中進行設置。

WXML代碼：

<swiper indicator-dots="{{indicatorDots}}"
        autoplay="true" interval="5000" duration="1000">
    <block wx:for="{{imgUrls}}">
        <swiper-item>
            <image src="{{item}}" class="slide-image" width="400" height="150"/>
        </swiper-item>
    </block>
</swiper>

以上就是這個輪播的的過程，主要應用組件，autoplay設置是否自動播放，interval設置每隔多少毫秒進行切換，duration設置切換的速度。中對所有的照片進行遍歷。

感謝你能夠認真閱讀完這篇文章，希望小編分享的“微信小程序的輪播功能怎么實現”這篇文章對大家有幫助，同時也希望大家多多支持創新互聯網站建設公司，，關注創新互聯行業資訊頻道，更多相關知識等著你來學習!

本文標題：微信小程序的輪播功能怎么實現-創新互聯
地址分享：http://m.kartarina.com/article40/cddjeo.html

成都網站建設公司_創新互聯，為您提供動態網站、網站排名、電子商務、Google、關鍵詞優化、網站設計公司

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯