柚子快報激活碼778899分享：微信小程序?qū)崿F(xiàn)輪播圖

http://yzkb.51969.com/

微信小程序?qū)崿F(xiàn)輪播圖

問題背景

客戶端開發(fā)和學(xué)習(xí)過程中，輪播圖是一個很常見的功能，本文將介紹如何在微信小程序中實現(xiàn)輪播圖。

問題分析

前一篇文章(參考 https://blog.51cto.com/baorant24/6188322 )，我們實現(xiàn)無限滾動的獲獎名單使用了swiper組件，事實上，這個組件也可以用來實現(xiàn)輪播圖，是一樣的原理。 輪播圖是隔段時間就會自動更換一張圖片，可以用swiper組件來實現(xiàn)這一操作。 swiper組件由多個swiper-item組成，可以定義任意多個swiper-item。 swiper的相關(guān)屬性如下： indicator-dots：Boolean類型。用來指示是否顯示面板指示點(上文提到的3個小圓點就是面板指示點，默認(rèn)為false。 autoplay：Boolean類型。用來決定是否自動播放，默認(rèn)為false。 interval：Number類型。用來設(shè)置swiper-item的切換時間間隔，默認(rèn)為5000毫秒。 circular：Boolean類型。用來設(shè)置swiper-item的循環(huán)滾動。

代碼文件目錄如下所示：

問題解決

話啊不多說，直接說上代碼。 (1)index.wxml文件，代碼如下：

(2)index.wxss文件，代碼如下：

/* 設(shè)置swiper組件的寬高 */

swiper{

width: 100%;

height: 600rpx;

}

/* 設(shè)置swiper組件里面圖片的寬高 */

swiper image{

width: 100%;

height: 600rpx;

}

運(yùn)行結(jié)果如下：

問題總結(jié)

本文介紹了如何在微信小程序中實現(xiàn)輪播圖，有興趣的同學(xué)可以進(jìn)一步深入研究

柚子快報激活碼778899分享：微信小程序?qū)崿F(xiàn)輪播圖

http://yzkb.51969.com/

相關(guān)鏈接