页面由组件构成，页面的高度和宽度由组件的高度和宽度确定，当页面的高度大于屏幕的高度，或者页面的宽度大于屏幕的宽度，页面就会出现滚动条。

  • 页面指的是w文件
  • 屏幕指的是门户中用于显示功能界面的区域

目录

下面分别介绍流式布局、充满布局、响应式布局、手机界面布局等页面布局方式。

1、流式布局

下图为流式布局，流式布局的特点是组件顺序向下排列，页面内部不出现滚动条，整个页面出现一个滚动条。例如：演示案例中的订单申请功能。

流式布局

2、充满布局

下图为充满布局，充满布局的特点是整个页面不出现滚动条，页面内部的组件出现滚动条。

2.1、左右充满

充满布局

上图为组织权限中的组织管理功能，组织管理分为左右两个区域，

  1. 设置为充满布局——给window组件增加一个class：x-full-screen
  2. 显示左右两个区域——使用row(bootstrap)组件，row下面有两个col，row和col都设置height:100%。左右两个区域占屏幕的比例通过col的class设置，左边的col的class属性为col-xs-3，右边的col的class属性为col-xs-9，表示左右区域的宽度比为1:3，这里使用的是bbotstrap的样式，屏幕宽度为12，左右两列加起来是12，就表示会占满整个屏幕
  3. 左边——放一个grid组件，设置height:100%;width:100%,清空column的width属性
  4. 右边——分为上中下3个部分，使用panel组件，class属性只保留x-panel，并且设置height:100%，content里面放dataTables组件

2.2、上下充满

充满布局

上图为组织权限中的分级管理功能，分级管理分为左右两个区域，右边区域再分为上下两个区域，设置基本和组织管理的设置一样，不同之处在于

  • 右边分为上下两个区域，放两个panel组件，class属性只保留x-panel，并且设置height:50%，这样就是平分，可以设置为其它的百分数

2.3、多标签页充满

多标签页充满布局

上图为组织权限中的权限查询功能，权限查询分为两个标签页，使用tabs组件实现标签页，标签页里面组件的设置基本和组织管理的设置一样

3、响应式布局

X5的样式基于 Bootstrap，Bootstrap提供了响应式布局，可以通过同一份代码快速、有效适配手机、平板、PC 设备，下面两幅图分别是在不同分辨率的两台计算机上面的显示效果，第一幅图的分辨率是1280*720，显示三列信息，第二幅图的分辨率是1024*768，显示两列信息。

1280*720页面

 

 

1024*768页面

使用响应式布局可以适应不同的分辨率，在大分辨率时，多显示信息，在小分辨率时，少显示信息。这样的响应式布局是如何设置的呢？

响应式布局的设计

答案就是使用row(bootstrap)组件，在row里面添加列col，设置col的样式

响应式布局col设置

目前，是将屏幕宽度分为4个区间，小于768，大于768且小于992，大于992且小于1200，大于1200，屏幕的宽度平均划分成12等份，设置每一列在每个区间占几等份，就可以实现不同分辨率时，界面的显示效果不同。

例如：本例中col设置了col-lg-4的样式，表示在分辨率大于1200时，占三分之一，所以一行显示了三列，同时设置了col-md-6的样式，表示在分辨率大于992且小于1200时，占二分之一，所以一行显示了两列，可以预见，在屏幕分辨率小于768时，一行将显示一列。

4、手机界面布局

4.1、显示多页

多页

象外卖这种有四页的界面在手机应用中是很常见的，使用contents组件和buttonGroup组件实现。

多页的设置

以外卖为例：contents组件添加四个content，buttonGroup组件添加四个button，设置每个button的target属性为对应的content的xid。

4.2、显示多行信息（一行显示一条记录）

多行信息

象请假管理这种展示多条记录的界面在手机应用中是很常见的，使用list组件和row组件实现。

多行信息设置

以请假管理为例：在list组件中放row组件，row分为两列，左边的列里面放orgImage组件显示人员头像，右边的列里面在放row组件，每个行里面设置两列。每个列可以设置宽度、可以设置垂直对齐方式。

列宽度的设置

  • 百分比——class属性设置x-col-25等样式，表示占屏幕宽度的百分比
  • 固定值——class属性设置x-col-fixed，style属性设置width:100px，设置具体的宽度值
  • 由内容决定——class属性设置x-col-fixed，style属性设置width:auto
  • 列宽平分——class属性不设置样式

列垂直对齐方式的设置

  • 靠上——x-col-top
  • 居中——x-col-center
  • 靠下——x-col-bottom

如果需要实现分页加载数据，先放scrollview组件，再放list组件。

4.3、显示多行信息（一行显示多条记录）

多行信息

这种情况，有两种做法

  • 在list组件里面的li节点上的style属性中增加width和float:left即可，width可以是百分比，也可以是固定值。
  • 在list组件里面的li节点上的class属性中设置col-xs-6即可显示为两列，设置col-xs-4即可显示为三列，设置col-xs-3即可显示为四列等等

多行信息设置

5、总结

1、组件的高度

  • 设置为固定——例如：height:200px
  • 设置为充满——height:100%
  • 设置为不固定——不设置height，grid组件的height设置为auto

固定和充满都可能出现滚动条，不固定就是有多长显示多长，因此不会出现滚动条。在外层组件有高度的情况下，才能设置组件的高度为充满，

  • 在流式布局中组件的高度可以设置为固定、不固定。
  • 在充满布局中组件的高度可以设置为充满。

5.2、几种布局使用组件对比

组件 流式布局 充满布局 响应式布局 手机界面
window class属性增加x-full-screen
row 使用row(bootstrap)组件，不设置height 使用row(bootstrap)组件，设置row和col的height为100% 使用row(bootstrap)组件 使用row组件
panel 使用panel(bootstrap)组件，不设置height 使用panel组件，class属性中去掉x-full，设置height为100% 使用panel组件
tabs 使用tabs(bootstrap)组件 使用tabs组件
grid height设置为auto或者固定值 height设置为100%
dataTables dataTables组件在panel组件的content里面，可以充满，在col里面没有充满效果，因此要在col中充满，需要先放panel组件，删除top和bottom，再在content中放dataTables组件

 

 

本文由WeX5君整理，WeX5一款开源免费的html5开发工具，H5 App开发就用WeX5!

阅读其他app 开发相关文章：http://doc.wex5.com/?p=3443