1.swiper組件是干嘛的？

滑塊視圖容器。其中只可放置swiper-item組件，否則會(huì)導(dǎo)致未定義的行為。

2.swiper和swiper-itme怎么使用？

接下來(lái)我嘗試教大家怎么使用swiper組件去做一個(gè)輪播圖效果

和之前一樣，先設(shè)置一個(gè)空頁(yè)面。

我們先寫入一個(gè)基礎(chǔ)代碼格式

`

<swiper><swiper-item><view>A</view></swiper-item> </swiper>

?我們可以看到代碼中swiper標(biāo)簽下有一個(gè)swiper-itme標(biāo)簽下有一個(gè)view標(biāo)簽，

為什么這么嵌套呢？

????????因?yàn)閟wiper把他比作一個(gè)大盒子，swiper-itme 比作一個(gè)大盒子中的小盒子 如圖

?正常情況下swiper代表整個(gè)塊是輪播圖，seiper-itme代表每一張圖，但是我們寫代碼的原則是能不能懂他原來(lái)的框架就不動(dòng)，盡然swiper-itme是代表每一張圖，我們就在里面寫image或這view都可以對(duì)吧，所以由此得出上面的格式，但是我上圖只顯示了一個(gè)A，如果我要多張輪播圖，是不是要復(fù)制多個(gè)swiper-itme標(biāo)簽由此可以得出一下代碼：

<swiper><swiper-item><view>A</view></swiper-item><swiper-item><view>B</view></swiper-item><swiper-item><view>C</view></swiper-item> </swiper>

?這樣我們就能看到左邊的示范圖他就可以滑動(dòng)了

這時(shí)候?yàn)榱朔奖悴榭次覀兘o代碼加一點(diǎn)樣式

修改后代碼為

list.wxml

<swiper class="siwper-container"><swiper-item><view class="itme">A</view></swiper-item><swiper-item><view class="itme">B</view></swiper-item><swiper-item><view class="itme">C</view></swiper-item> </swiper>

list.wxss

.itme{height: 150px;background-color: lightskyblue;text-align: center;line-height: 150px; }

?到這里輪播圖基本制作完成了，接下來(lái)我們看看可以經(jīng)常使用的屬性

屬性類型默認(rèn)值必填說(shuō)明最低版本

indicator-dots	boolean	false	否	是否顯示面板指示點(diǎn)	1.0.0
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)切換	1.0.0
interval	number	5000	否	自動(dòng)切換時(shí)間間隔	1.0.0
circular	boolean	false	否	是否采用銜接滑動(dòng)	1.0.0

?更多屬性進(jìn)入微信開發(fā)小程序swiper使用文檔

常用屬性我們來(lái)測(cè)試一下，

indicator-dots 的使用（是否顯示面板指示點(diǎn)）

我們把屬性寫在swiper后面試試效果

通過(guò)上圖可以看出，添加了indicator-dots屬性后指示點(diǎn)出來(lái)了

?indicator-color 屬性的使用（未選中指示點(diǎn)顏色）

我們嘗試把指示點(diǎn)修改顏色

????????

?我們可以看得到，左邊演示的指示點(diǎn)已經(jīng)被我們更換成紅色了透明70%的顏色

indicator-active-color 屬性的使用（當(dāng)前選中的指示點(diǎn)顏色）

我們看到上圖只是修改了未選擇的顏色，現(xiàn)在我們來(lái)修改一個(gè)選中后的顏色

這時(shí)我們看圖就能發(fā)現(xiàn)，顏色已經(jīng)被我們修改成綠色了

autoplay屬性的使用（是否自動(dòng)切換）

在生活中我們能看到很多輪播圖，他都是自動(dòng)切換的，可是我們上面做了這么多工作發(fā)現(xiàn)圖片都是固定不動(dòng)的需要人為去參與滑動(dòng)，這時(shí)就有了autoplay屬性讓他自動(dòng)切換，實(shí)現(xiàn)我們不動(dòng)，輪播圖自動(dòng)播放

我們會(huì)發(fā)現(xiàn)添加這個(gè)屬性后，每過(guò)一段時(shí)間會(huì)自動(dòng)播放

interval屬性的使用（自動(dòng)切換時(shí)間間隔）

這時(shí)有人就會(huì)問(wèn)，我既然自動(dòng)切換了，哪怎么才能控制時(shí)間呢？有的圖我要比較慢切換，有的圖我要他唰唰的跳過(guò)，所以就有了interval屬性控制自動(dòng)切換的時(shí)間

我們嘗試添加上去看看，時(shí)間單位是毫秒

?相當(dāng)于每過(guò)2000毫秒就更換一張圖片，更具自己的情況進(jìn)行修改

circular屬性使用（是否采用銜接滑動(dòng)）

當(dāng)我們圖片達(dá)到10張圖片的時(shí)候，我們滑動(dòng)到最后一張，但是又想回到第一張發(fā)現(xiàn)回不去了，很麻煩需要一直向左滑動(dòng)，所以就有了銜接滑動(dòng)，從最后一張到第一張圖片，我們沒(méi)添加只前是這樣的。

最后一張想滑動(dòng)卻不給我滑動(dòng)，這時(shí)候添加試試

?添加后發(fā)現(xiàn)他可以銜接滑動(dòng)了，這樣增加了用戶體驗(yàn)。

到目前位置swiper組件常用屬性解釋到此結(jié)束了，感謝大家閱讀，歡迎加入我們一起學(xué)習(xí)

?

?

?

總結(jié)

以上是生活随笔為你收集整理的微信小程序 swiper和weiper-itme组件的基本使用，微信小程序轮播图这么做教程的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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