17-1，swiper元件

我們在小程式裡實現頂部輪播圖來動態的顯示一些熱門商品，這個時候就要用到swiper元件了。

官方文件：https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

如下圖，就是我們傳說中的頂部輪播圖。

給大家看下官方swiper簡介

可以看出我們的swiper必須結合swiper-item來使用。

我們的swiper-item就是用來裝每個輪播圖使用的。下面我寫一個簡單的例子來看下

我這裡先在swiper裡放三個swiper-item，給每個swiper-item設定不同的背景顏色。這個時候我們就可以實現這三個swiper-item的來回滑動切換。但是我們通常開發的時候，肯定不是僅僅顯示一個顏色，我們應該在裡面放置圖片。要不然怎麼叫輪播圖呢。

我們如果想在swiper-item裡顯示圖片，就要藉助我們前面學習的image元件了。如下圖所示

這樣我們就可以完整的實現一個輪播圖元件了。我把完整的程式碼貼出來給到大家。

<swiper indicator-dots>  <swiper-item>    <image src="https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg" />  </swiper-item>  <swiper-item>    <image src="https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1819216937,2118754409&fm=26&gp=0.jpg" />  </swiper-item>  <swiper-item>    <image src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2273029747,2912173232&fm=15&gp=0.jpg" />  </swiper-item></swiper>1234567891011

可以看出我們的swiper有很多屬性，下面我會重點的把我們一些常用的屬性，透過一個綜合案例來給大家講解下。

還是來看官方文件：https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

我們在小程式裡做頁面跳轉有兩種方式