微信小程式|圖片輪播
- 2019 年 12 月 24 日
- 筆記
問題描述
圖片輪播在很多APP中都很常見，那麼該如何實現呢？
Swiper滑塊視圖容器用來在指定區域內切換內容的顯示，可以用於製作圖片輪播效果。
解決方案
從網上下載好圖片之後，將其拖動到小程式的一個文件夾內保存。（筆者將這些圖片保存在pages的子目錄images下），然後再按照小程式設計流程：在js提供數據（此處即要輪播的圖片），在wxml進行布局。
在js:
|
Page({ data: { indicatorDots:true, autoplay:true, interval:5000, duration:1000, imgUrls:[ "/pages/images / 日暮.jpg", "/pages/images/海浪.jpg", "/pages/images/窗戶.jpg", "/pages/images/馬路.jpg" ] }, |
|---|
在wxml:
|
<view><swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}"><block wx:for="{{imgUrls}}"><swiper-item><image src="{{item}}" style="width:100%"></image></swiper-item></block></swiper></view> |
|---|
程式碼解釋：
設置autoplay等於true時就可以自動進行輪播，設置indicatorDots等於true時代表面板顯示點。還有interval,duration均為swiper的屬性。
wx:for列表渲染單個組件；blockwx:for列表渲染多個組件。
效果圖：
圖3.1圖片輪播效果
結語
在wxml文件里採用swiper滑塊視圖容器組件進行輪播區域的布局，在js文件提供輪播圖片，是否自動播放，輪播的時長等數據，通過數據綁定的方式渲染到頁面上。掌握swiper組件的屬性有利於我們更好地設置輪播。
實習編輯 | 王楠嵐
責 編 | 趙 微
