内容简介:本文主要介绍了滚动视图组件(scroll-view)的各种常用功能,例如,垂直和水平滚动、滚动事件等,并通过例子代码来演示这些功能的使用方法。1. 垂直滚动视图scroll-view是容器组件,如果该组件的子组件超过scroll-view的高度或宽度,该组件会允许子组件在垂直或水平方向滚动视图,以便显示其他没有显示的子组件。本节主要介绍如何让scroll-view垂直滚动。
本文主要介绍了滚动视图组件(scroll-view)的各种常用功能,例如,垂直和水平滚动、滚动事件等,并通过例子代码来演示这些功能的使用方法。
1. 垂直滚动视图
scroll-view是容器组件,如果该组件的子组件超过scroll-view的高度或宽度,该组件会允许子组件在垂直或水平方向滚动视图,以便显示其他没有显示的子组件。本节主要介绍如何让scroll-view垂直滚动。
如果要让scroll-view垂直滚动,需要设置scroll-y属性值为true。例如,下面的布局代码,将scroll-view组件的高度设为200px,里面的每一个子view的高度也是200px,而且放了4个子view。这样scroll-view就允许滚动而现实其他的子view了。
<view> <view>垂直滚动</view> <scroll-view scroll-y="true" > <view id="green"></view> <view id="red" ></view> <view id="yellow"></view> <view id="blue"></view> </scroll-view> </view>
当上下滚动是,效果如图1所示。
图1 scroll-view垂直滚动的效果
scroll-view滚动条的初始位置为0,也就是在最上端,如果要改变滚动条的默认位置,需要设置scroll-top属性,该属性默认的属性值为0,也就是滚动条在最顶端。如果该属性值不为0,滚动条会向下滚动(该属性值需大于0)。下面的布局代码设置了scroll-top属性的值是60。
<scroll-view scroll-y="true" scroll-top="60"> … … </scroll-view>
显示效果如图2所示,很明显,在没有滚动的情况下,红色的子view显示了一部分(正好是60px)。
图2 设置scroll-top属性的效果
如果想让scroll-view一开始就滚动到某一个子视图,需要使用scroll-into-view属性,该属性需要指定一个子视图的id。例如,下面的布局代码设置了scroll-into-view属性的值为yellow,也就是说,当系统装载scroll-view组件时,会直接滚动到第3个子组件yellow。如果同时设置了scroll-top和scroll-into-view属性,后者的优先级更高。
<scroll-view scroll-y="true" bindscrolltoupper="upper" bindscrolltolower="lower" upper-threshold="100" lower-threshold="300" bindscroll="scroll" scroll-top="100" scroll-into-view="yellow" > … … </scroll-view>
2. 水平滚动视图
如果想让scroll-view水平滚动,那么需要设置scroll-x属性为true,布局代码如下:
<view> <view>水平滚动</view> <scroll-view scroll-x="true"> <view id="green"></view> <view id="red" ></view> <view id="yellow"></view> <view id="blue"></view> </scroll-view> </view>
其中scroll-view_H样式的代码如下:
.scroll-view_H{ white-space: nowrap; }
显示效果如图3所示。
图3 scroll-view水平滚动的效果
如果要让滚动条默认停留在其他位置,需要设置scroll-left属性,例如,下面的布局代码将scroll-left属性的值设为50。
<scroll-view scroll-x="true" scroll-left="50"> … … </scroll-view>
显示效果如图4所示。
图4 设置scroll-left属性的效果
3. 滚动到边缘触发事件
scroll-view组件提供了一些事件,其中当滚动条滚动到最上端或最下端(垂直滚动),或滚动到最左端或最右端(水平滚动),会分别触发两个事件,这两个事件分别用bindscrolltoupper和bindscrolltolower属性指定。这两个属性需要指定事件对应的函数名称。例如,下面的布局代码包含了两个scroll-view组件,上面的是垂直滚动,下面的是水平滚动。
<view> <view>垂直滚动</view> <scroll-view scroll-y="true" bindscrolltoupper="upper" bindscrolltolower="lower" > <view id="green"></view> <view id="red" ></view> <view id="yellow"></view> <view id="blue"></view> </scroll-view> <view>水平滚动</view> <scroll-view scroll-x="true" scroll-left="50" bindscrolltoupper="upper" bindscrolltolower="lower" > <view id="green"></view> <view id="red" ></view> <view id="yellow"></view> <view id="blue"></view> </scroll-view> </view>
在上面的布局代码中,bindscrolltoupper指定了upper方法,而bindscrolltolower指定了lower方法。这两个方法需要在index.js文件中实现,代码如下:
var app = getApp() Page({ … … upper: function(e) { console.log(e) }, lower: function(e) { console.log(e) }, })
在这两个方法中简单地输出了参数e。当水平或垂直滑动滚动条时,系统会根据滚动条的位置触发相应的事件。例如,图5所示是垂直滚动到最低端,然后再滚动到最顶端,水平滚动先滚动到最后端,然后再滚动到最左端的输入日志。
图5 滚动到边缘的输出日志
那么,还有一个问题,系统是如何判定时候滚动到了边缘的呢?其实这是通过另外两个属性来判定的,这两个属性是upper-threshold和lower-threshold。这两个属性的默认值是50,这个值差不多是滚动条的长度。在默认情况下,当滚动条的一端刚一接触上、下、左、右边缘时就会触发相应的事件。如果要改变这两个属性的默认值,那么滚动条可能会滚动到其他的位置才会触发相应的事件。例如,下面的代码设置了upper-threshold属性的值为100,lower-threshold属性的值为300。
<scroll-view scroll-y="true" bindscrolltoupper="upper" bindscrolltolower="lower" upper-threshold="100" lower-threshold="300"> … … </scroll-view>
对于垂直来说,在默认情况下,滚动条会处在如图6所示的位置,才会触发下边缘滚动事件。不过如果lower-threshold属性的值是300,那么滚动条会在如图7所示的位置就会触发下边缘滚动事件。
图6 lower-threshold属性为默认值时触发下边缘滚动事件的位置
图7 lower-threshold属性为300时触发下边缘滚动事件的位置
4 滚动事件
scroll-view除了可以监控滚动条处在边缘的事件,还可以实时监控滚动条滚动的状态,这就是滚动事件,使用bindscroll属性设置,该属性的值是滚动事件对应的函数名。例如,下面的代码设置bindscroll属性值为scroll。
<scroll-view scroll-x="true" scroll-left="50" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" > <view id="green"></view> <view id="red" ></view> <view id="yellow"></view> <view id="blue"></view> </scroll-view>
当滚动条水平或垂直滚动时,会不断触发滚动事件,并调用scroll函数,该函数的代码如下:
scroll:function(e) { console.log(e.detail) }
通过e参数中的detail属性,可以获得与滚动相关的信息。detail属性可以提供如下6个值。
- scrollLeft:水平滚动时滚动条当前的位置,在垂直滚动时该值为0。
- scrollTop:垂直滚动时滚动条当前的位置,在水平滚动时该值为0。
- scrollHeight:垂直滚动时所有子视图的总高度(包括子视图之间的间距),在水平滚动时,该值是scroll-view组件的高度。
- scrollWidth:水平滚动时所有子视图的总宽度(包括子视图之间的间距)。在垂直滚动时,该值是scroll-view组件的宽度。
- deltaX:水平滚动时的增量,也就是从当前滚动条的位置移动到新位置的距离。从左向右水平移动,该值小于0,从右向左水平移动,该值大于0。通过该属性值可以判断水平移动的方向。
- deltaY:垂直滚动时的增量,也就是从当前滚动条的位置移动到新位置的距离。从上到下垂直移动,该值小于0,从下向上垂直移动,该值大于0。通过该属性值可以判断垂直移动的方向。
图8是垂直和水平滚动时触发滚动事件输出的日志信息,其中也包含滚动到边缘输出的日志信息。
图8 滚动时输出的日志
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- iOS小技巧·把子视图控制器的视图添加到父视图控制器
- CouchDB 视图简介及增量更新视图的方法
- c# – 将数据从部分视图传递到其父视图
- Django 基于函数的视图与基于类的视图
- 类视图
- laravel 基础教程 —— 视图
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
"笨办法"学Python
肖 (Zed A.Shaw) / 王巍巍 / 人民邮电出版社 / 2014-11-1 / CNY 49.00
本书是一本Python入门书籍,适合对计算机了解不多,没有学过编程,但对编程感兴趣的读者学习使用。这本书以习题的方式引导读者一步一步学习编程,从简单的打印一直讲到完整项目的实现,让初学者从基础的编程技术入手,最终体验到软件开发的基本过程。 本书结构非常简单,共包括52个习题,其中26个覆盖了输入/输出、变量和函数三个主题,另外26个覆盖了一些比较高级的话题,如条件判断、循环、类和对象、代码测......一起来看看 《"笨办法"学Python》 这本书的介绍吧!