微信小程序圖片輪播及滾動(dòng)視圖
作者：杰瑞教育，來自原文地址
移動(dòng)端常用效果圖片輪播及數(shù)據(jù)列表已被小程序封裝成了組件，這里和大家分享一下如何使用。
Scroll-view 可滾動(dòng)視圖區(qū)域
Swiper 圖片輪播容器
Navigator 頁面鏈接的3種方式
scroll-view
屬性說明如下:
使用豎向滾動(dòng)時(shí)，需要給一個(gè)固定高度，通過 WXSS 設(shè)置 height。示例代碼：
效果圖:
注意點(diǎn):
tip: 請勿在 scroll-view 中使用 textarea、map、canvas、video 組件
tip: scroll-into-view 的優(yōu)先級(jí)高于 scroll-top
tip: 在滾動(dòng) scroll-view 時(shí)會(huì)阻止頁面回彈，所以在 scroll-view 中滾動(dòng)，是無法觸發(fā) onPullDownRefresh
tip: 若要使用下拉刷新，請使用頁面的滾動(dòng)，而不是 scroll-view ，這樣也能通過點(diǎn)擊頂部狀態(tài)欄回到頁面頂部
二、swiper
屬性說明:
注意：其中只可放置組件，否則會(huì)導(dǎo)致未定義的行為。
swiper-item
僅可放置在組件中，寬高自動(dòng)設(shè)置為100%。
代碼如下:
JS代碼:
- // pages/test1/test1.js
- Page({
- data:{
- wxTitle:"微信程序",
- alertInfo:"登錄成功了",
- isShow:false,
- imgUrls: [
- "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1489225534462&di=009148115f436101d6377305b2f660ef&imgtype=0&src=http%3A%2F%2Fimg.sucaifengbao.com%2Fpsd%2Fwangye%2F212_114_bce.jpg",'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
- 'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
- 'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.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頁面鏈接 屬性說明:
navigator 導(dǎo)航的問題 導(dǎo)航分三種
a.open-type="navigate" 打開新界面 b.open-type="redirect" 在本界面中打開新界面 c.open-type="switchTab" 控制tab頁之間的切換
注意：
- 所有需要跳轉(zhuǎn)鏈接的界面必須在app.json中注冊
- a, b只能連接非tabBar中注冊占用的頁面，不能打開url="../index/index",因?yàn)閜ages/index/index界面是tab頁
- c只能打開app.json中注冊過的tab頁，也就是被tabBar注冊的界面
代碼如下:
