微信小程式swiper輪播圖
阿新 • • 發佈：2018-12-31
在微信小程式中我們經常需要展示一些圖片，或者一些資料（公告）用來迴圈展示。微信為我們封裝了一個元件可以讓我們用來方便快捷的實現這個需求。下面簡單的介紹下swiper元件。首先我們先看下文件：
這邊可以看到為我們提供了一些屬性名，我們可以用來控制指示點是否顯示，輪播圖片的自動切換和切換時間，切換事件等等。那麼下面我們來寫一個簡單的輪播圖。首先我們先看下效果圖，以及資料來源： 
我們首先看下wxml：
由於我的資料來源是獲取伺服器上的，所以我加了判斷，以免當資料來源不存在發生異常。可以從上面的wxml中可以看到我設定了顯示指示點，自動播放，間隔5秒，動畫1秒。這邊有個圖片的mode的樣式，這邊就不介紹了，可以去官方API檢視哦。。。上面設定完成後，到這邊基本就沒有什麼好說的了。TIPS：微信自帶了滾動方向，可以實現上下滾動的哦，只要設定一下：vertical='true' 
公眾號： 
這邊可以看到為我們提供了一些屬性名，我們可以用來控制指示點是否顯示，輪播圖片的自動切換和切換時間，切換事件等等。那麼下面我們來寫一個簡單的輪播圖。首先我們先看下效果圖，以及資料來源： 我們首先看下wxml：由於我的資料來源是獲取伺服器上的，所以我加了判斷，以免當資料來源不存在發生異常。可以從上面的wxml中可以看到我設定了顯示指示點，自動播放，間隔5秒，動畫1秒。這邊有個圖片的mode的樣式，這邊就不介紹了，可以去官方API檢視哦。。。上面設定完成後，到這邊基本就沒有什麼好說的了。TIPS：微信自帶了滾動方向，可以實現上下滾動的哦，只要設定一下：vertical='true' 公眾號：