一、介绍
当一个容器内容很多时，若容器无法显示完整内容，则可通过滚动操作查看所有内容
在微信小程序中scroll-view组件可以实现滚动效果
二、scroll-view组件的属性值
（1）scroll-x 【boolean型】 允许横向滚动条，默认false
（2）scroll-y 【boolean型】 允许纵向滚动条，默认false
注意：在允许横向、纵向滚动后，还需要使scroll、view组件中内容的宽度和高度大于scroll-view组件本身的宽高才可滚动
（3）scroll-top 【number/string型】 设置竖向滚动条位置，默认为空
（4）scroll-left 【number/string型】 设置横向滚动条位置，默认为空
（5）scroll-into-view 【string型】 当前可在哪个方向滚动，则在哪个方向滚动到该元素。值为某子元素id（id不能以数字开头）
（6）scroll-with-animation 【boolean型】 在设置滚动条位置时是否使用动画过渡，默认为false
（7）bindscrolltoupper 【eventhandle绑定数据处理】 滚动到顶部/左边时触发的事件
（8）bindscrolltolower 【eventhandle】 滚动到底部/右边时触发的事件
（9）bindscroll 【eventhandle】 滚动时触发的事件
若在wxml代码里使用bindscroll绑定一个函数，在js文件里编写e.detail，输出结果为：具体见三、代码
e.detail为自定义事件所携带的数据，下面为e.detail获取到的信息：
(9-1)scrollLeft 横向滚动条左侧到视图左边的距离
(9-2)scrollTop 横向滚动条上端到视图顶部的距离
(9-3)scrollHeight 纵向滚动条在Y轴上最大滚动距离
(9-4)scrollWidth 横向滚动条在X轴上最大滚动距离
(9-5)deltaX 横向滚动条的滚动状态
(9-6)deltaY 纵向滚动条的滚动状态
代码示例：
配置好微信小程序文件后，
在index.wxml文件中：
<navigation-bar title="Weixin" back="{{false}}" color="black" background="#FFF"></navigation-bar>
<scroll-view class="scrollarea" scroll-y scroll-x type="list" style="height: 200px;" bindscroll="text1">
<!-- 一、scroll-view组件 --><view style="width: 200%;height: 800px; background-image: linear-gradient(to bottom right,red,yellow);"></view>
</scroll-view>在index.css文件中：
Page({text1:function(e){console.log(e.detail);}
})如下图，我设置了scroll-x和scroll-y允许了横纵向的移动。bindscroll绑定了text1这一触发事件,输出e.detail获取到的信息。
