2.1 布局组件

布局组件是可以在界面中显示出来的，通过修改布局组件的样式来实现界面的美观。布局组件有很多相同的属性和方法，组件之间具有关联性。

2.1.1 bar组件

bar组件是容器组件，一般放置button和buttonGroup等组件。例如，在bar组件中插入一个button组件和h2组件。下面是bar组件的示例。

【例2-1】bar组件。

运行结果如图2-1所示。

图2-1 bar组件运行结果

2.1.2 titleBar组件

titleBar组件是标题栏组件，属于容器组件，带有一个标题和左右按钮区，适合作为页面的head（头部）。例如，在titleBar组件左、右侧区域插入button组件，在中间区域插入input组件。下面是titleBar组件的示例。

【例2-2】titleBar组件。

运行结果如图2-2所示。

图2-2 titleBar组件运行结果

2.1.3 contents组件

contents组件是滑动切换页面的组件，在.w文件中使用contents组件可以实现不同页面的展现，特别是可以通过手势滑动来切换页面。contents组件使用content来展现页面，contents组件中可以包括多个content，content可以动态生成或删除，增强了页面显示的灵活性。contents组件和buttonGroup组件配合使用，使用button组件的target属性关联content，可以实现按钮和页面的绑定，进而实现页面的切换。下面是contents组件的示例。

【例2-3】contents组件。

这段代码是在w页面panel组件的中间区域content中放一个contents组件，contents组件中添加两个content，分别是content2和content3，在panel组件的底部bottom中插入一个buttonGroup组件，在buttonGroup组件中添加两个button组件，分别是buttton1和button2，单击button1进入content2页面，单击button2进入content3页面。运行结果如图2-3所示。

图2-3 contents组件运行结果

2.1.4 panel组件

panel组件自动充满整个屏幕，分为上中下三个区域，其中上方区域（top）（头部）固定显示在屏幕上方，下方区域（bottom）（尾部）固定显示在屏幕下方，中间区域（content）自动充满其他区域。头部和尾部的高度和位置都是固定的，暂时头部不支持改变高度，中间区域展示主要内容，可以任意布局。头部和尾部可以删除，中间区域不能删除。“x-pull”表示为panel组件充满整个屏幕，“x-card”表示为panel的卡片风格，可以调整panel的高度。下面是panel组件的示例。

【例2-4】panel组件。

运行结果如图2-4所示。

图2-4 panel组件运行结果

2.1.5 row组件

row组件是行组件，通过一系列的行（row）和列（col）组合来构建页面，内容只能放在列（col）里面，只有列（col）可以作为行（row）的直接子元素。row组件从面板上放到设计器中，默认是三列，每列均分屏幕宽度，可以在组件上添加行、列，调整每列的宽度。对没有设置列宽的列（col）将均分剩余列的宽度，“x-col-fixed”表示为适用于固定宽度的列，根据内容宽度自适应变化（width:auto）或在该class（类）的列上设置固定宽度（width：50px），“x-col-10”表示为列所占页面宽度的10%。row组件还可以嵌套使用，在row组件的列（col）中新增行（row）。下面是row组件的示例。

【例2-5】row组件。

在w文件中添加一个row组件，row组件的第一列宽度设为宽度自适应，第二列宽度设为100px，在第三列中插入一个row组件。

运行结果如图2-5所示。

图2-5 row组件运行结果

2.1.6 wing组件

wing组件是一般用于带侧边栏可隐藏的页面，例如，在w页面放一个wing组件，右侧边栏去掉，左侧边栏作为菜单部分，content作为内容显示的主体，通过contents动态加载功能页，在model（模型）的onLoad事件中分别加载相应功能。wing组件的属性如下。

●animate：[boolean]是否使用滑动动画，默认值为true。

●display：[string]边栏展示方式，默认值为overlay，可选参数有overlay（覆盖）、push（推拉）、reveal（门侧）、compress（按键）。

●routable：[boolean]是否启动路由，默认值为false，路由相关知识参考路由模块。

下面是wing组件的示例。

【例2-6】wing组件。

运行结果如图2-6所示。

图2-6 wing组件运行结果

2.1.7 scrollView组件

scrollView组件是滚动容器，配合列表组件使用，实现向上滑动加载数据、向下滑动刷新数据。scrollView组件总共分为三个部分（三个div），第一部分是向下滑动刷新数据，第二部分是内容主体，可以添加其他组件，第三部分是向上滑动加载数据。例如，在scrollView里面放list组件，list关联data组件，data组件的limit属性设置一次加载的记录数，data组件记录的是一个月的总共开销。scrollView组件的属性如下。

●bounce：[boolean][默认值为true]是否超过实际位置反弹，值为true时滑动到头部和尾部时会有跳跃效果，值为false时滑动到头部和尾部时没有拉动反弹的效果。

●hideScrollbar：[boolean][默认值为true]默认隐藏滚动条，滚动时才显示，如果是false，那么滚动条会一直存在。

●hScroll：[boolean][默认值为false]是否横向滚动（必须存在横向内容超出屏幕宽度才起作用）。

●lockDirection：[boolean][默认值为true]单方向滚动锁定，值为true时，用手滑动，只能上下滑动或左右滑动，不能两个方向同时滚动。值为false表示可以两个方向同时滚动。

●pullDownLabel：[string][默认值为:下滑刷新…]下滑文字。

●pullDownLoadingLabel：[string][默认值为:加载中…]下滑加载中文字。

●pullDownMoveLabel：[string][默认值为:松开刷新…]下滑移动中文字。

●pullUpLabel：[string][默认值为:加载更多…]上滑文字。

●pullUpLoadingLabel：[string][默认值为:加载中…]上滑加载中文字。

●pullUpMoveLabel：[string][默认值为:释放加载…]上滑移动中文字。

●vScroll：[boolean]是否纵向滚动。

●vScrollbar：[boolean]是否有纵向滚动条。

下面是scrollView组件的示例。

【例2-7】scrollView组件。

运行结果如图2-7所示。

图2-7 scrollView组件运行结果

2.1.8 windowContainer组件

windowContainer组件用来嵌套其他w页面，windowContainer嵌入w页面，在父页面加载的时候，同时加载嵌入页。例如，在加载index首页的同时进入main主页面。下面是windowContainer组件的示例。

【例2-8】windowContainer组件。

运行结果如图2-8所示。

图2-8 windowContainer组件运行结果