本文主要介绍了滚动视图组件（scroll-view）的各种常用功能，如纵横滚动、滚动事件等，并通过示例代码进行了演示功能使用方法1.垂直滚动视图scroll-view是一个容器组件。如果组件的子组件超过scroll-view的高度或宽度，组件将允许子组件在垂直或水平方向滚动视图，以显示其他未显示的子组件。本节主要介绍如何让scroll-view垂直滚动。如果想让scroll-view垂直滚动，需要设置scroll-y属性为true。比如下面的布局代码设置了scroll-view组件的高度为200px，里面的每个子视图的高度也是200px，放置了4个子视图。这样scroll-view就可以实现滚动，实现其他的子view。垂直滚动当上下滚动，效果如图1所示。图1scroll-view垂直滚动效果scroll-view滚动条的初始位置为0，即在顶部。如果要改变滚动条的默认位置，需要设置scroll-top属性，默认为0，即滚动条在最上面。如果属性值不为0，滚动条会向下滚动（属性值必须大于0）。下面的布局代码将scroll-top属性的值设置为60。......显示效果如图2所示，显然，在没有滚动的情况下，红色子视图显示了一部分（刚好60px）。图2设置scroll-top属性的效果如果想让scroll-view一开始就滚动到某个子视图，就需要使用scroll-into-view属性，这个属性需要指定一个子视图的id。例如，下面的布局代码将scroll-into-view属性的值设置为yellow，即系统加载scroll-view组件时，会直接滚动到第三个子组件yellow。如果同时设置了scroll-top和scroll-into-view属性，则后者优先。……2。水平滚动视图如果想让scroll-view水平滚动，需要设置scroll-x属性为true，布局代码如下：水平滚动其中scroll-view_H样式代码如下：.scroll-view_H{white-space:nowrap;}显示效果如图3所示。图3scroll-view水平滚动效果如果想让滚动条默认停留在其他位置，需要设置scroll-left属性。例如，以下布局代码将scroll-left属性的值设置为50。......显示效果为如图4所示。图4设置scroll-left属性的效果3.滚动到边缘触发事件scroll-view组件提供了一些事件，当滚动条滚动到顶部或底部时（垂直滚动）,或向左或向右滚动（Horizo??ntalscrolling），会分别触发两个事件，这两个事件分别由bindscrolltoupper和bindscrolltolower属性指定。这两个属性需要指定事件对应的函数名。例如，下面的布局代码包含两个滚动视图组件，上面一个用于垂直滚动，下面一个用于水平滚动。垂直滚动水平滚动上面布局代码中bindscrolltoupper指定upper方法,bindscrolltolower指定了lower方法，这两个方法需要在index.js文件中实现，代码如下：varapp=getApp()Page({......upper:function(e){console.log(e)},lower:function(e){console.log(e)},})这两个方法只是输出参数e，当水平或垂直滑动滚动条时，系统会触发相应的事件。例如，如图5所示，输入日志垂直滚动到底部再到顶部，水平滚动到底部再到左侧。图5输出日志滚动到边缘。然后，还有一个问题，系统是怎么判断什么时候滚动到边缘的呢？其实这个是由另外两个属性决定的，这两个属性就是upper-threshold和lower-t阈值。这两个属性的默认值为50，这个值几乎就是滚动条的长度。默认情况下，当滚动条的一端刚好碰到上下左右边缘时，就会触发相应的事件。如果要改变这两个属性的默认值，那么滚动条可能会滚动到其他位置触发相应的事件。例如，以下代码将upper-threshold属性的值设置为100，将lower-threshold属性的值设置为300。……对于垂直，在默认情况下，滚动条会在显示的位置图6，底部边缘滚动事件会被触发。但是如果lower-threshold属性的值为300，那么滚动条就会在图7所示的位置触发下边滚动事件。图6lower-threshold时触发下边滚动事件的位置属性为默认值图7lower-threshold属性为300时触发下边缘滚动事件的位置4滚动事件scroll-view可以监听滚动条在边缘的事件，也可以监听滚动条的实时滚动状态。这是滚动事件，使用bindscroll属性设置。该属性的值为滚动事件对应的函数名。例如，以下代码将bindscroll属性设置为滚动。<查看id="green"class="scroll-view-item_Hbc_green">当滚动条水平滚动或vertically，会持续触发滚动事件，调用滚动函数。该函数的代码如下：scroll:function(e){console.log(e.detail)}通过e参数中的detail属性，可以获取滚动相关的信息。detail属性可以提供以下6个值。scrollLeft：水平滚动时滚动条的当前位置，垂直滚动时该值为0。scrollTop：垂直滚动时滚动条的当前位置，水平滚动时该值为0。scrollHeight：垂直滚动时所有子视图的总高度（包括子视图之间的间距）。当水平滚动时，这个值是滚动视图组件的高度。scrollWidth：水平滚动时所有子视图的总宽度（包括子视图之间的间距）。垂直滚动时，这个值是滚动视图组件的宽度。deltaX：水平滚动时的增量，即滚动条当前位置到新位置的距离。从左向右水平移动，值小于0，从右向左水平移动，值大于0。可以通过该属性值判断水平移动的方向。deltaY：垂直滚动时的增量，即滚动条当前位置到新位置的距离。从上到下垂直移动，值小于0，从下到上垂直移动，值大于0。可以通过该属性值判断垂直移动的方向。图8是垂直和水平滚动时触发scroll事件输出的日志信息，其中还包括滚动到边缘时输出的日志信息。图8滚动时的日志输出更多免费学习资源，请加微信公众号：极客源
