在gif里一張張圖片的切換就是今天要說的小功能啦，在小程序里創(chuàng)建輪播圖，今天由于太忙的原因就不錄demo圖了（好吧其實我是懶...）看本程序媛是怎么弄出來的吧~

一、組件 swiper

微信小程序提供了原生的輪播控件，在微信的文檔中叫做“滑塊視圖容器”，只需要簡單的配置就可以實現(xiàn)輪播的效果，非常的方便。在微信開發(fā)文檔中我們可以看到這些屬性：

然鵝，在開發(fā)的過程中，我發(fā)現(xiàn)還有一個屬性 vertical ，其值接受Boolean型變量，默認(rèn)值為false。當(dāng)不設(shè)置 vertical 屬性，或者 vertical=”false” 時，指示點在組件下部，圖片輪播從左至右，效果如下：

當(dāng)設(shè)置 vertical=”true” 時，指示點在組件右部，圖片輪播就會變成從下至上，就是這么任性~

我們需要注意的是： swiper是一個容器類視圖，但是其中只能放置組件，如放置其他節(jié)點，會被自動刪除。

二、swiper-item

swiper-item的話就僅可放置在 swiper 組件中了，寬高自動設(shè)置為100%。代表輪播中一幀的頁面，通常以循環(huán)的方式加載到頁面中。

代碼如下：

三、item單擊事件

我們在 swiper-item 上綁定事件，通過 data 自定義標(biāo)簽綁定數(shù)據(jù)。然后在function中通過event拿到。

注意：代碼中的 data-id 和 data-name 均為自定義標(biāo)簽，然后可以在綁定事件的event中通過 id 和 name 拿到。

最后一個注意點：在綁定的function中可以通過event拿到對應(yīng)的數(shù)據(jù)。比如：e.currentTarget.dataset.id 對應(yīng)wxml中的data-id

當(dāng)然，還有另一種辦法。不需要綁定事件，通過在每一個的 swiper-item 外面包上一個 a 標(biāo)簽，以超鏈接的方式跳轉(zhuǎn)頁面，也是可以完成的。

以上就是今天的圖片輪播小功能啦~一個動態(tài)頁面和一個靜態(tài)頁面相比當(dāng)然會生動許多，不想讓你的小程序死氣沉沉，那就做個輪播吧~！