微信小程序怎么使用圖片輪播及滾動視圖

這篇“微信小程序怎么使用圖片輪播及滾動視圖”文章，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要參考一下，對于“微信小程序怎么使用圖片輪播及滾動視圖”，小編整理了以下知識點，請大家跟著小編的步伐一步一步的慢慢理解，接下來就讓我們進入主題吧。

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.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頁之間的切換

注意：

所有需要跳轉鏈接的界面必須在app.json中注冊a, b只能連接非tabBar中注冊占用的頁面，不能打開url="../index/index",因為pages/index/index界面是tab頁c只能打開app.json中注冊過的tab頁，也就是被tabBar注冊的界面

小程序是什么意思

小程序是一種不需要下載安裝即可使用的應用，通過掃描二維碼或是搜一搜立即使用，操作簡單，便于傳播，能夠實現消息通知、線下掃碼、公眾號關聯等七大功能。它基于微信運行的，類似于APP，想用就用，用完即走，不會占用內存。

以上是“微信小程序怎么使用圖片輪播及滾動視圖”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！