微信小程序開發如何使用圖片輪播及滾動視圖

2020-03-21 16:23:21

字體：大中小

來源：轉載

供稿：網友

移動端常用效果圖片輪播及數據列表已被小程序封裝成了組件，這里和大家分享一下如何使用。

Scroll-view 可滾動視圖區域
Swiper 圖片輪播容器
Navigator 頁面鏈接的3種方式
scroll-view
屬性說明如下:

微信小程序,小程序開發,圖片輪播,滾動視圖

使用豎向滾動時，需要給一個固定高度，通過 WXSS 設置 height。示例代碼：

微信小程序,小程序開發,圖片輪播,滾動視圖

效果圖:

微信小程序,小程序開發,圖片輪播,滾動視圖

注意點:

tip: 請勿在 scroll-view 中使用 textarea、map、canvas、video 組件
tip: scroll-into-view 的優先級高于 scroll-top
tip: 在滾動 scroll-view 時會阻止頁面回彈，所以在 scroll-view 中滾動，是無法觸發 onPullDownRefresh
tip: 若要使用下拉刷新，請使用頁面的滾動，而不是 scroll-view ，這樣也能通過點擊頂部狀態欄回到頁面頂部

二、swiper

屬性說明:

微信小程序,小程序開發,圖片輪播,滾動視圖

注意：其中只可放置組件，否則會導致未定義的行為。

swiper-item

僅可放置在組件中，寬高自動設置為100%。

代碼如下:

微信小程序,小程序開發,圖片輪播,滾動視圖

JS代碼:

// pages/test1/test1.jsPage({data:{wxTitle:"微信程序",alertInfo:"登錄成功了",isShow:false,imgUrls: ["https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1489225534462&di=009148115f436101d6377305b2f660ef&imgtype=0&src=https://www.2cto.comhttps://www.2cto.com/uploadfile/2018/0519/20180519105145728.jpg",'],indicatorDots: true,autoplay: true,interval: 5000,duration: 1000},changeIndicatorDots: function(e) {this.setData({indicatorDots: !this.data.indicatorDots})},changeAutoplay: function(e) {this.setData({autoplay: !this.data.autoplay})},intervalChange: function(e) {this.setData({interval: e.detail.value})},durationChange: function(e) {this.setData({duration: e.detail.value})}})

效果如下:

微信小程序,小程序開發,圖片輪播,滾動視圖