建站
咨詢
售后
建站咨詢
新聞中心
這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
創(chuàng)新互聯(lián)小程序教程：微信小程序視圖容器scroll-view
scroll-view
可滾動(dòng)視圖區(qū)域。
成都創(chuàng)新互聯(lián)公司成立于2013年，先為察布查爾錫伯等服務(wù)建站，察布查爾錫伯等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為察布查爾錫伯企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問(wèn)題。
| 屬性名 | 類型 | 默認(rèn)值 | 說(shuō)明 |
|---|---|---|---|
| scroll-x | Boolean | false | 允許橫向滾動(dòng) |
| scroll-y | Boolean | false | 允許縱向滾動(dòng) |
| upper-threshold | Number | 50 | 距頂部/左邊多遠(yuǎn)時(shí)（單位px），觸發(fā) scrolltoupper 事件 |
| lower-threshold | Number | 50 | 距底部/右邊多遠(yuǎn)時(shí)（單位px），觸發(fā) scrolltolower 事件 |
| scroll-top | Number | 設(shè)置豎向滾動(dòng)條位置 | |
| scroll-left | Number | 設(shè)置橫向滾動(dòng)條位置 | |
| scroll-into-view | String | 值應(yīng)為某子元素id（id不能以數(shù)字開(kāi)頭）。設(shè)置哪個(gè)方向可滾動(dòng)，則在哪個(gè)方向滾動(dòng)到該元素 | |
| scroll-with-animation | Boolean | false | 在設(shè)置滾動(dòng)條位置時(shí)使用動(dòng)畫(huà)過(guò)渡 |
| enable-back-to-top | Boolean | false | iOS點(diǎn)擊頂部狀態(tài)欄、安卓雙擊標(biāo)題欄時(shí)，滾動(dòng)條返回頂部，只支持豎向 |
| bindscrolltoupper | EventHandle | 滾動(dòng)到頂部/左邊，會(huì)觸發(fā) scrolltoupper 事件 | |
| bindscrolltolower | EventHandle | 滾動(dòng)到底部/右邊，會(huì)觸發(fā) scrolltolower 事件 | |
| bindscroll | EventHandle | 滾動(dòng)時(shí)觸發(fā)，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY} |
使用豎向滾動(dòng)時(shí)，需要給
示例代碼：
vertical scroll
horizontal scroll
var order = ['red', 'yellow', 'blue', 'green', 'red']
Page({
data: {
toView: 'red',
scrollTop: 100
},
upper: function(e) {
console.log(e)
},
lower: function(e) {
console.log(e)
},
scroll: function(e) {
console.log(e)
},
tap: function(e) {
for (var i = 0; i < order.length; ++i) {
if (order[i] === this.data.toView) {
this.setData({
toView: order[i + 1]
})
break
}
}
},
tapMove: function(e) {
this.setData({
scrollTop: this.data.scrollTop + 10
})
}
})
Bug & Tip
tip: 請(qǐng)勿在scroll-view中使用textarea、map、canvas、video組件tip:scroll-into-view的優(yōu)先級(jí)高于scroll-toptip: 在滾動(dòng)scroll-view時(shí)會(huì)阻止頁(yè)面回彈，所以在scroll-view中滾動(dòng)，是無(wú)法觸發(fā)onPullDownRefreshtip: 若要使用下拉刷新，請(qǐng)使用頁(yè)面的滾動(dòng)，而不是scroll-view，這樣也能通過(guò)點(diǎn)擊頂部狀態(tài)欄回到頁(yè)面頂部
本文題目：創(chuàng)新互聯(lián)小程序教程：微信小程序視圖容器scroll-view
本文路徑：http://fisionsoft.com.cn/article/dpgpipd.html
