1.swiper組件是干嘛的？

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

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

接下來我嘗試教大家怎么使用swiper組件去做一個輪播圖效果

和之前一樣，先設置一個空頁面。

我們先寫入一個基礎代碼格式

`

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

?我們可以看到代碼中swiper標簽下有一個swiper-itme標簽下有一個view標簽，

為什么這么嵌套呢？

????????因為swiper把他比作一個大盒子，swiper-itme 比作一個大盒子中的小盒子 如圖

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

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

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

這時候為了方便查看我們給代碼加一點樣式

修改后代碼為

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; }

?到這里輪播圖基本制作完成了，接下來我們看看可以經常使用的屬性

屬性類型默認值必填說明最低版本

indicator-dots	boolean	false	否	是否顯示面板指示點	1.0.0
indicator-color	color	rgba(0, 0, 0, .3)	否	指示點顏色	1.1.0
indicator-active-color	color	#000000	否	當前選中的指示點顏色	1.1.0
autoplay	boolean	false	否	是否自動切換	1.0.0
interval	number	5000	否	自動切換時間間隔	1.0.0
circular	boolean	false	否	是否采用銜接滑動	1.0.0

?更多屬性進入微信開發小程序swiper使用文檔

常用屬性我們來測試一下，

indicator-dots 的使用（是否顯示面板指示點）

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

通過上圖可以看出，添加了indicator-dots屬性后指示點出來了

?indicator-color 屬性的使用（未選中指示點顏色）

我們嘗試把指示點修改顏色

????????

?我們可以看得到，左邊演示的指示點已經被我們更換成紅色了透明70%的顏色

indicator-active-color 屬性的使用（當前選中的指示點顏色）

我們看到上圖只是修改了未選擇的顏色，現在我們來修改一個選中后的顏色

這時我們看圖就能發現，顏色已經被我們修改成綠色了

autoplay屬性的使用（是否自動切換）

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

我們會發現添加這個屬性后，每過一段時間會自動播放

interval屬性的使用（自動切換時間間隔）

這時有人就會問，我既然自動切換了，哪怎么才能控制時間呢？有的圖我要比較慢切換，有的圖我要他唰唰的跳過，所以就有了interval屬性控制自動切換的時間

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

?相當于每過2000毫秒就更換一張圖片，更具自己的情況進行修改

circular屬性使用（是否采用銜接滑動）

當我們圖片達到10張圖片的時候，我們滑動到最后一張，但是又想回到第一張發現回不去了，很麻煩需要一直向左滑動，所以就有了銜接滑動，從最后一張到第一張圖片，我們沒添加只前是這樣的。

最后一張想滑動卻不給我滑動，這時候添加試試

?添加后發現他可以銜接滑動了，這樣增加了用戶體驗。

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

?

?

?

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。