微信小程式|圖片輪播

  • 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組件的屬性有利於我們更好地設置輪播。

實習編輯 | 王楠嵐

責 編 | 趙 微