scroll-view
是什么?
微信小程序滾動(dòng)視圖，分為橫向滾動(dòng)丑念，縱向滾動(dòng)让蕾。以及滾動(dòng)事件浪规。
| 屬性名 | 類型 | 默認(rèn)值 | 說明 |
|---|---|---|---|
| scroll-x | Boolean | false | 允許橫向滾動(dòng) |
| scroll-y | Boolean | false | 允許縱向滾動(dòng) |
| upper-threshold | Number | 50 | 距上部臨界值，達(dá)到多遠(yuǎn)距離時(shí)探孝， 觸發(fā)scrolltoupper事件 |
| lower-threshold | Number | 50 | 距底部臨界值笋婿，達(dá)到多遠(yuǎn)距離時(shí)， 觸發(fā)scrolltolower事件 |
| scroll-top | Number | 設(shè)置豎向滾動(dòng)條的位置 | |
| scroll-left | Number | 設(shè)置橫向滾動(dòng)條的位置 | |
| scroll-into-view | String | 值應(yīng)為某子元素id,設(shè)置那個(gè)方向可滾動(dòng)顿颅， 則在那個(gè)方向滾動(dòng)到該元素 | |
| scroll-with-animation | Boolean | false | 在設(shè)置滾動(dòng)條位置時(shí)使用動(dòng)畫過渡 |
| enable-back-to-top | Boolean | false | ios點(diǎn)擊頂部狀態(tài)欄缸濒，安卓雙擊標(biāo)題欄時(shí)回頂部。 |
| 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)-示例
使用豎向滾動(dòng)時(shí)栖疑，需要給<scroll-view>一個(gè)固定高度，通過wxss設(shè)置height滔驶。
<view>
<view>scroll-view 豎向滾動(dòng)</view>
<scroll-view scroll-y="true" style="height:200rpx;"
bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll">
<view>視圖1</view>
<view>視圖2</view>
<view>視圖3</view>
</scroll-view>
</view>
注釋:scroll-y不管為true跟false遇革。只要寫上scroll-y，它就代表豎向滑動(dòng)
Page({
upper:function (e){
觸發(fā)頂部事件
type:"scrolltoupper",
detail:{direction:"top"}
},
lower:function (e){
觸發(fā)底部事件
type:"scrolltolower",
detail:{direction:"bottom"}
},
scroll:function (e){
只要滑動(dòng)就會(huì)觸發(fā) 滑動(dòng)事件
type:"scroll",
},
})
橫向滾動(dòng)-示例
<view>
<view>
<text>scroll-view橫向滑動(dòng)</text>
</view>
<view>
<scroll-view scroll-x bindscroll="scroll" bindscrolltoupper="upper">
<view>視圖1</view>
<view>視圖2</view>
<view>視圖3</view>
</scroll-view>
</view>
</view>
注釋：橫向滾動(dòng)與豎向滾動(dòng)揭糕，都可以給綁定一些事件萝快，包括到頂，到底著角，滑動(dòng)事件揪漩。
