微信小程序开发(4):滚动视图(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了。

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