微信小程序开发:水平排列布局与滚动视图(scroll-view)

2017-01-11

本文节选自李宁老师的电子书:http://yuedu.baidu.com/ebook/b3af07cfb04e852458fb770bf78a6529647d35c9


一:水平排列布局

小程序的布局和React Native的布局类似,采用了弹性布局的方法。也就是说,分为水平和垂直布局。默认是从左向右水平依次放置组件,从上到下依次放置组件。


wxml文件用于放置参与布局的组件,为了更好地描述小程序是如何布局的,本章使用了带背景色的view组件来演示。view是小程序中所有可视组件的根。


任何可视组件都需要使用样式来设置自身的属性,并完成相应的布局。在小程序中,可以使用两种方式设置样式,一种是class属性,另外一种是style属性。前者需要指定在wxss文件中定义的样式,后者允许直接在组件中定义样式属性。例如,如果要水平放置三个view组件,可以在wxml文件中使用下面的代码。


<view class="flex-wrp" style="flex-direction:row">

     <view class="flex-item bc_green"></view>

     <view class="flex-item bc_red"></view>

     <view class="flex-item bc_blue"></view>

</view>


显示的效果如图1所示。


微信小程序开发:水平排列布局与滚动视图(scroll-view)

图1 水平布局


 


在上面的代码中,同时使用了class和style。分别指定了样式flex-wrp和样式属性flex-direction:row。其中后者表示view中的子组件要按水平排列。flex-wrp的定义如下:


.flex-wrp{

     height: 100px;

     display:flex;

     background-color: #FFFFFF;

 }


其中display:flex表示弹性布局,flex是Flexible的缩写。


如果class属性需要指定多个样式,样式直接用空格分隔,代码如下:


<view class="flex-item bc_green"></view>

其中flex-item的代码如下:


.flex-item{

    width: 100px;

    height: 100px;

}

前面所有的样式都是在当前页面的index.wxss文件中定义的,而bc_green以及其他几个设置颜色的样式是在app.wxss文件中定义的,所以的页面都可以使用。


.bc_green{

     background-color: #09BB07;

 }

 .bc_red{

     background-color: #F76260;

 }

 .bc_blue{

     background-color: #10AEFF;

 }

 .bc_yellow{

     background-color: #FFBE00;

 }

 .bc_gray{

     background-color: #C9C9C9;

 }


如果不想使用style属性,可以将flex-direction:row放在样式中,例如,可以在index.wxss文件中添加如下的样式。


.flex-row{

     flex-direction:row;

 }


然后修改index.wxml文件中的代码如下:


<view class="flex-wrp flex-row" >

     <view class="flex-item bc_green"></view>

     <view class="flex-item bc_red"></view>

     <view class="flex-item bc_blue"></view>

</view>

可能很多读者会发现一个问题,本节的例子只有三个view,如果放置了多个view会怎么样呢?从flex-item样式可知,每个view的尺寸是100*100,单位是像素(px),如果放置过多,可能会发生如下两种情况。


折行

压缩每一个view的宽度

那么到底会发生哪种情况呢?我们不妨做一个实验,代码如下:

<view class="flex-wrp flex-row" >

     <view class="flex-item bc_green"></view>

     <view class="flex-item bc_red"></view>

     <view class="flex-item bc_blue"></view>

     <view class="flex-item bc_green"></view>

     <view class="flex-item bc_red"></view>

     <view class="flex-item bc_blue"></view>

     <view class="flex-item bc_green"></view>

     <view class="flex-item bc_red"></view>

     <view class="flex-item bc_blue"></view>

</view>


上面的代码很明显,view中包含了9个子view,保存index.wxml文件后,会显示如图2所示的效果。


微信小程序开发:水平排列布局与滚动视图(scroll-view)


图2 压缩了每一个view的宽度


很明显,每一个view的宽度都被压缩了(因为每一个view的默认尺寸是一个正方形),以适应设备的宽度。不过可能这种处理方式并不符合我们的要求,如果我们的要求是让每一个view的尺寸保持不变,如果一行放不下,就折到下一行,那应该怎么办呢?答案就在后面的内容!


其实要想让view折行也很简单,只需要加一个flex-wrap:wrap即可,代码如下:


<view class="flex-wrp flex-row" style="flex-wrap:wrap" >

     <view class="flex-item bc_green"></view>

     <view class="flex-item bc_red"></view>

     <view class="flex-item bc_blue"></view>

     <view class="flex-item bc_green"></view>

     <view class="flex-item bc_red"></view>

     <view class="flex-item bc_blue"></view>

     <view class="flex-item bc_green"></view>

     <view class="flex-item bc_red"></view>

     <view class="flex-item bc_blue"></view>

</view>


或者将flex-wrap:wrap添加到flex-row样式中,代码如下:


.flex-row{

     flex-direction:row;

     flex-wrap:wrap;

 }

修改后的运行效果如图3所示。



微信小程序开发:水平排列布局与滚动视图(scroll-view)

图3 折行水平排列


二:滚动视图(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 class="section__title">垂直滚动</view>

       <scroll-view scroll-y="true" style="height: 200px;" >

           <view id="green" class="scroll-view-item bc_green"></view>

           <view id="red"  class="scroll-view-item bc_red"></view>

           <view id="yellow" class="scroll-view-item bc_yellow"></view>

           <view id="blue" class="scroll-view-item bc_blue"></view>

       </scroll-view>

 </view>

 


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


微信小程序开发:水平排列布局与滚动视图(scroll-view)


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


<scroll-view scroll-y="true" style="height: 200px;" scroll-top="60">

   … …

</scroll-view>

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


微信小程序开发:水平排列布局与滚动视图(scroll-view)


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


<scroll-view 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" >

    … …

</scroll-view>


2 水平滚动视图

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


<view>

     <view class="section__title">水平滚动</view>

     <scroll-view class="scroll-view_H" scroll-x="true" style="width: 100%">

         <view id="green" class="scroll-view-item_H bc_green"></view>

         <view id="red"  class="scroll-view-item_H bc_red"></view>

         <view id="yellow" class="scroll-view-item_H bc_yellow"></view>

         <view id="blue" class="scroll-view-item_H bc_blue"></view>

     </scroll-view>

 </view>


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


.scroll-view_H{

    white-space: nowrap;

}


显示效果如图3所示。


微信小程序开发:水平排列布局与滚动视图(scroll-view)


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


<scroll-view class="scroll-view_H" scroll-x="true"  scroll-left="50" style="width: 100%">

    … …

</scroll-view>


显示效果如图4所示。

微信小程序开发:水平排列布局与滚动视图(scroll-view)





0
收藏