Home产品研发微信小程序开发（4）：滚动视图（scroll-view）-演道网

微信小程序开发（4）：滚动视图（scroll-view）-演道网

2016 年 12 月 23 日
本文主要介绍了如何让视图实现垂直和水平滚动，实现该功能的组件是scroll-view。

1. 垂直滚动视图

scroll-view是容器组件，如果该组件的子组件超过scroll-view的高度或宽度，该组件会允许子组件在垂直或水平方向滚动视图，以便显示其他没有显示的子组件。本节主要介绍如何让scroll-view垂直滚动。

如果要让scroll-view垂直滚动，需要设置scroll-y属性值为true。例如，下面的布局代码，将scroll-view组件的高度设为200px，里面的每一个子view的高度也是200px，而且放了4个子view。这样scroll-view就允许滚动而现实其他的子view了。

XHTML

1
2
3
4
5
6
7
8
9
       class=“section__title”>垂直滚动
       scroll-y=“true” style=“height: 200px;” >
           id=“green” class=“scroll-view-item bc_green”>
           id=“red”  class=“scroll-view-item bc_red”>
           id=“yellow” class=“scroll-view-item bc_yellow”>
           id=“blue” class=“scroll-view-item bc_blue”>
      


 

当上下滚动是，效果如图1所示。

%e5%b1%8f%e5%b9%95%e5%bf%ab%e7%85%a7-2016-12-22-%e4%b8%8a%e5%8d%8811-00-51

scroll-view滚动条的初始位置为0，也就是在最上端，如果要改变滚动条的默认位置，需要设置scroll-top属性，该属性默认的属性值为0，也就是滚动条在最顶端。如果该属性值不为0，滚动条会向下滚动（该属性值需大于0）。下面的布局代码设置了scroll-top属性的值是60。

XHTML

1
2
3
scroll-y=“true” style=“height: 200px;” scroll-top=“60”>
   … …


显示效果如图2所示，很明显，在没有滚动的情况下，红色的子view显示了一部分（正好是60px）。

%e5%b1%8f%e5%b9%95%e5%bf%ab%e7%85%a7-2016-12-22-%e4%b8%8a%e5%8d%8811-03-00

如果想让scroll-view一开始就滚动到某一个子视图，需要使用scroll-into-view属性，该属性需要指定一个子视图的id。例如，下面的布局代码设置了scroll-into-view属性的值为yellow，也就是说，当系统装载scroll-view组件时，会直接滚动到第3个子组件yellow。如果同时设置了scroll-top和scroll-into-view属性，后者的优先级更高。

XHTML

1
2
3
scroll-y=“true” style=“height: 200px;”  bindscrolltoupper=“upper” bindscrolltolower=“lower”  upper-threshold=“100” lower-threshold=“300” bindscroll=“scroll” scroll-top=“100”  scroll-into-view=“yellow” >
    … …

2 水平滚动视图

如果想让scroll-view水平滚动，那么需要设置scroll-x属性为true，布局代码如下：

XHTML

1
2
3
4
5
6
7
8
9
     class=“section__title”>水平滚动
     class=“scroll-view_H” scroll-x=“true” style=“width: 100%”>
         id=“green” class=“scroll-view-item_H bc_green”>
         id=“red”  class=“scroll-view-item_H bc_red”>
         id=“yellow” class=“scroll-view-item_H bc_yellow”>
         id=“blue” class=“scroll-view-item_H bc_blue”>
    

其中scroll-view_H样式的代码如下：

CSS

1
2
3
.scroll-view_H{
    white-space: nowrap;
}

显示效果如图3所示。

%e5%b1%8f%e5%b9%95%e5%bf%ab%e7%85%a7-2016-12-22-%e4%b8%8a%e5%8d%8811-08-32

如果要让滚动条默认停留在其他位置，需要设置scroll-left属性，例如，下面的布局代码将scroll-left属性的值设为50。

XHTML

1
2
3
class=“scroll-view_H” scroll-x=“true”  scroll-left=“50” style=“width: 100%”>
    … …

显示效果如图4所示。

%e5%b1%8f%e5%b9%95%e5%bf%ab%e7%85%a7-2016-12-22-%e4%b8%8a%e5%8d%8811-10-52

 

摘自《微信小程序开发实战》







转载自演道,想查看更及时的互联网产品技术热点文章请点击http://go2live.cn

Related Posts

About The Author

bjmayor

程序员，码农，php,python,ios,android,go，产品经理，创业。