導(dǎo)讀

經(jīng)過(guò)這段時(shí)間的學(xué)習(xí)，大家對(duì)小程序的編程和代碼掌握的如何了呢？

今天我們來(lái)講小程序里實(shí)現(xiàn)輪播圖的方法，大家要專心看哦。

組件

這個(gè)組件叫做滑塊組件，嗯，聽(tīng)起來(lái)還挺形象的，你看滑動(dòng)輪播圖的時(shí)候是不是就像滑動(dòng)一個(gè)個(gè)方框的一樣？

首先，按著老規(guī)矩，我們需要先打開(kāi)微信小程序開(kāi)發(fā)者文檔，看一下關(guān)于swiper組件的相關(guān)內(nèi)容：

這里要說(shuō)一下，跟swiper有關(guān)的還有這個(gè)swiper-item的組件，這個(gè)組件和swiper是一塊使用的，這個(gè)組件可以放一些東西進(jìn)去。

如上面所述，我們的代碼開(kāi)始編寫了，首先，需要把swiper和swiper-item的代碼寫進(jìn)去。

參考代碼：

那么，該如何插入第一張圖片并讓這個(gè)圖片有鏈接反應(yīng)呢？

這里需要多幾層嵌套代碼，其實(shí)不難理解，的意思的鏈接，我們鏈接到logs頁(yè)面上去，下面是圖片，我們用的是網(wǎng)絡(luò)圖片，復(fù)制網(wǎng)絡(luò)圖片的圖片地址即可。

參考代碼：

那么，該如何搞多幾張圖片，讓他們實(shí)現(xiàn)輪播呢？

簡(jiǎn)單來(lái)說(shuō)，就是講里面的內(nèi)容復(fù)制個(gè)幾份即可，但是要放在里面才可以。

我們給每一張圖片都換個(gè)背景。

可以看到，現(xiàn)在的小程序已經(jīng)實(shí)現(xiàn)成功了這輪播的效果。

---

進(jìn)一步修改

我們給.banner加一個(gè)樣式，剛才設(shè)定了樣式，我們現(xiàn)在來(lái)對(duì)樣式加個(gè)規(guī)范。

這里我們?cè)O(shè)置banner有一個(gè)1像素寬的紅色的實(shí)線邊框，然后寬為100%，高為200像素。

參考代碼： .banner{ border: 1px solid red; width: 100%; height: 200px;}

我們?cè)俳o這個(gè)圖片設(shè)置個(gè)樣式：

參考代碼： .banner image{ width: 100%; height: 100%;}

效果如下，當(dāng)然，我們可以打開(kāi)調(diào)試器，在wxml里面可以看到他能規(guī)定的內(nèi)容區(qū)域。

當(dāng)然，我們對(duì)這個(gè)了解下即可，我們可以把這個(gè)調(diào)整回來(lái)，大小根據(jù)實(shí)際情況調(diào)整一下即可。

組件的indicator-dots屬性：顯示指示點(diǎn)

這個(gè)有什么用呢？看看加上的效果就知道了：

有沒(méi)有發(fā)現(xiàn)，輪播圖上有了堆小點(diǎn)點(diǎn)，這些小點(diǎn)點(diǎn)可以讓我們清楚的看到有多少?gòu)垐D片。

參考代碼：

但是大家有沒(méi)有發(fā)現(xiàn)，現(xiàn)在的顏色真的很難看，是這種黑色的，遇到深色的就完全看不清了，那么，這種怎么解決呢？

組件的indicator-color和indicator-active-color屬性：調(diào)整指示點(diǎn)顏色和選中指示點(diǎn)的顏色

我們?cè)谶@里試一下，將指示點(diǎn)顏色調(diào)整為白色。(indicator-color)

(255,255,255)是白色，0.3是透明度了。數(shù)字越大越不透明。越小越透明。

參考代碼：

可以很清楚的看到效果，頁(yè)面里的顏色變成了純白的透明色，同樣的，我們來(lái)設(shè)置一下選中指示點(diǎn)的顏色：(indicator-active-color)

參考代碼：

組件的autoplay屬性：自動(dòng)切換

這個(gè)就其實(shí)挺簡(jiǎn)單了。我們之間在里面加上一個(gè)autoplay就可以了，可以看到，現(xiàn)在的顯示器上就已經(jīng)實(shí)現(xiàn)自動(dòng)切換了。

那么，有的小伙伴就會(huì)問(wèn)了，要是先修改輪播圖的切換時(shí)間怎么辦？

組件的interval屬性：調(diào)整輪播圖自動(dòng)切換的時(shí)間

這里面我們可以修改時(shí)間的長(zhǎng)短，默認(rèn)的5000毫秒，我們可以修改的時(shí)間更短或更長(zhǎng)。單位是毫秒。

參考代碼：

這個(gè)大家可以自己去試試，挺有意思的。

寫在最后

本章節(jié)分為兩節(jié)來(lái)講解，這里是上，我們將會(huì)在明天說(shuō)下，下節(jié)更精彩哦。

感謝您在百忙之中抽出時(shí)間來(lái)看小編的這篇文章，你的關(guān)注和點(diǎn)贊就是對(duì)小編最好的支持，謝謝大家了。

未來(lái)的章節(jié)會(huì)更加精彩，希望大家同小編能不見(jiàn)不散。

總結(jié)

以上是生活随笔為你收集整理的如何实现轮播图的内容的多少随div的大小动态变化_小程序学习日志8：swiper滑动轮播组件（轮播图）（上）...的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。