首页 网络编程 前端制作 数据库 CMS教程 脚本编程 微信开发 小程序开发 服务器

小程序开发

热门: ASP.NET PHP编程 ASP编程 JSP编程

微信小程序开发:用flex对view水平排列布局

来源:未知 发布时间:2017-06-08

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

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

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

<viewclass="flex-wrp" style="flex-direction:row">
    <viewclass="flex-item bc_green"></view>
    <viewclass="flex-item bc_red"></view>
    <viewclass="flex-item bc_blue"></view>
</view>

显示的效果如图1所示。

图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属性需要指定多个样式,样式直接用空格分隔,代码如下:

<viewclass="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文件中的代码如下:

<viewclass="flex-wrp flex-row">
    <viewclass="flex-item bc_green"></view>
    <viewclass="flex-item bc_red"></view>
    <viewclass="flex-item bc_blue"></view>
</view>

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

  • 折行
  • 压缩每一个view的宽度

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

<viewclass="flex-wrp flex-row">
    <viewclass="flex-item bc_green"></view>
    <viewclass="flex-item bc_red"></view>
    <viewclass="flex-item bc_blue"></view>
    <viewclass="flex-item bc_green"></view>
    <viewclass="flex-item bc_red"></view>
    <viewclass="flex-item bc_blue"></view>
    <viewclass="flex-item bc_green"></view>
    <viewclass="flex-item bc_red"></view>
    <viewclass="flex-item bc_blue"></view>
</view>

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

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

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

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

<viewclass="flex-wrp flex-row" style="flex-wrap:wrap">
    <viewclass="flex-item bc_green"></view>
    <viewclass="flex-item bc_red"></view>
    <viewclass="flex-item bc_blue"></view>
    <viewclass="flex-item bc_green"></view>
    <viewclass="flex-item bc_red"></view>
    <viewclass="flex-item bc_blue"></view>
    <viewclass="flex-item bc_green"></view>
    <viewclass="flex-item bc_red"></view>
    <viewclass="flex-item bc_blue"></view>
</view>

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

.flex-row{
    flex-direction:row;
    flex-wrap:wrap;
 }

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

图3 折行水平排列

网络编程 | 前端制作 | 数据库 | CMS教程 | 脚本编程 | 微信开发 | 小程序开发 | 服务器 |

程序员学习网,提供最新的微信开发教程,小程序开发教程,网络编程、php教程、asp.net教程、微信公众平台二次开发教程、脚本编程、网页制作、网页设计、网页特效,为站长与网络编程从业者提供学习资料,凡本网站转载的文章、图片等资料的版权归版权所有人所有,因无法和版权所有者一一联系,如果本网站选取的文/图威胁到您的权益,请您及时和本网站联系。 我们会在第一时间内采取措施,避免给双方造 成不必要的损失。
© 2015-2018 程序员学习网 版权所有,并保留所有权利。

电脑版 | 移动版