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

Scroll-view 可滾動(dòng)視圖區(qū)域
Swiper 圖片輪播容器
Navigator 頁(yè)面鏈接的3種方式
scroll-view
屬性說(shuō)明如下:

使用豎向滾動(dòng)時(shí)，需要給一個(gè)固定高度，通過(guò) WXSS 設(shè)置 height。示例代碼：

效果圖:

注意點(diǎn):

tip: 請(qǐng)勿在 scroll-view 中使用 textarea、map、canvas、video 組件
tip: scroll-into-view 的優(yōu)先級(jí)高于 scroll-top
tip: 在滾動(dòng) scroll-view 時(shí)會(huì)阻止頁(yè)面回彈，所以在 scroll-view 中滾動(dòng)，是無(wú)法觸發(fā) onPullDownRefresh
tip: 若要使用下拉刷新，請(qǐng)使用頁(yè)面的滾動(dòng)，而不是 scroll-view ，這樣也能通過(guò)點(diǎn)擊頂部狀態(tài)欄回到頁(yè)面頂部

二、swiper

屬性說(shuō)明:

注意：其中只可放置組件，否則會(huì)導(dǎo)致未定義的行為。

swiper-item

僅可放置在組件中，寬高自動(dòng)設(shè)置為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})}})

效果如下:

Navgator頁(yè)面鏈接
屬性說(shuō)明:

navigator 導(dǎo)航的問(wèn)題 導(dǎo)航分三種

a.open-type="navigate" 打開(kāi)新界面

b.open-type="redirect" 在本界面中打開(kāi)新界面

c.open-type="switchTab" 控制tab頁(yè)之間的切換

注意：

所有需要跳轉(zhuǎn)鏈接的界面必須在app.json中注冊(cè)a, b只能連接非tabBar中注冊(cè)占用的頁(yè)面，不能打開(kāi)url="../index/index",因?yàn)閜ages/index/index界面是tab頁(yè)c只能打開(kāi)app.json中注冊(cè)過(guò)的tab頁(yè)，也就是被tabBar注冊(cè)的界面

代碼如下: