:可滚动视图区域
| 属性名 | 类型 | 默认值 | 说明 |
| scroll-x | Boolean | false | 允许横向滚动 |
| scroll-y | Boolean | false | 允许纵向滚动 |
| upper-threshold | Number | 50 | 距顶部/左边多远时（单位px），触发 scrolltoupper 事件 |
| lower-threshold | Number | 50 | 距底部/右边多远时（单位px），触发 scrolltolower 事件 |
| scroll-top | Number |
| 设置竖向滚动条位置 |
| scroll-left | Number |
| 设置横向滚动条位置 |
| scroll-into-view | String |
| 值应为某子元素id，则滚动到该元素，元素顶部对齐滚动区域顶部 |
| bindscrolltoupper | EventHandle |
| 滚动到顶部/左边，会触发 scrolltoupper 事件 |
| bindscrolltolower | EventHandle |
| 滚动到底部/右边，会触发 scrolltolower 事件 |
| bindscroll | EventHandle |
| 滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY} |
我们在.wxml文件中使用
<scroll-view class="contentScroll" scroll-y="true" bindscrolltoupper="changeP">
<view class="view1"></view>
<view class="view2"></view>
<view class="view3"></view>
<view class="view4"></view>
</scroll-view>
我们在scroll-view中设置了4个view，这里绑定了，scroll-view滚动到顶部（垂直布局）bindscrolltoupper方法，并设置了scroll-y的值为true。表示允许纵向滚动。
在对应.wxss文件中实现布局，这里我们实现scroll-view的竖直滚动
使用竖向滚动时，需要给<scroll-view/>一个固定高度，通过 WXSS 设置 height。
.contentScroll{
width: 100%;
height: 500rpx;
background-color: yellow;
}
.view1{
width: 100%;
height: 300rpx;
background-color: red;
}
.view2{
width: 100%;
height: 300rpx;
background-color: greenyellow;
}
.view3{
width: 100%;
height: 300rpx;
background-color: cadetblue;
}
.view4{
width: 100%;
height: 300rpx;
background-color: yellow;
}
在.js文件中执行changeP方法
changeP:function (){
console.log("到顶部了");
}
页面显示的效果:
页面可以纵向滚动，当滚动到最顶部时，在控制台会输出：到顶部了。