您好,登錄后才能下訂單哦!
這篇“微信小程序怎么使用圖片輪播及滾動(dòng)視圖”文章,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要參考一下,對(duì)于“微信小程序怎么使用圖片輪播及滾動(dòng)視圖”,小編整理了以下知識(shí)點(diǎn),請(qǐng)大家跟著小編的步伐一步一步的慢慢理解,接下來就讓我們進(jìn)入主題吧。
Scroll-view 可滾動(dòng)視圖區(qū)域
Swiper 圖片輪播容器
Navigator 頁面鏈接的3種方式
scroll-view
屬性說明如下:
使用豎向滾動(dòng)時(shí),需要給一個(gè)固定高度,通過 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ì)阻止頁面回彈,所以在 scroll-view 中滾動(dòng),是無法觸發(fā) onPullDownRefresh
tip: 若要使用下拉刷新,請(qǐng)使用頁面的滾動(dòng),而不是 scroll-view ,這樣也能通過點(diǎn)擊頂部狀態(tài)欄回到頁面頂部
屬性說明:
注意:其中只可放置組件,否則會(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=https://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頁面鏈接
屬性說明:
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注冊的界面
小程序是一種不需要下載安裝即可使用的應(yīng)用,通過掃描二維碼或是搜一搜立即使用,操作簡單,便于傳播,能夠?qū)崿F(xiàn)消息通知、線下掃碼、公眾號(hào)關(guān)聯(lián)等七大功能。它基于微信運(yùn)行的,類似于APP,想用就用,用完即走,不會(huì)占用內(nèi)存。
以上是“微信小程序怎么使用圖片輪播及滾動(dòng)視圖”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。