概述

小程序的布局采用了和Css3中相同的 flex(弹性布局)方式,使用方法也类似(只是属性名不同而已).

水平排列

默认是从左向右水平依次放置组件,从上到下依次放置组件。

任何可视组件都需要使用样式来设置自身的属性,并完成相应的布局。

在小程序中,可以使用两种方式设置样式,一种是 class 属性,另外一种是 style 属性,跟HTML中一样。

前者需要指定在 wxss 文件中定义的样式,后者允许直接在组件中定义样式属性。

例如,如果要水平放置三个 view 组件,可以在 wxml 文件中使用下面的代码。

<!-- index.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_yellow'></view>
</view>

index.wxss中使用

.flex-wrp{
background-color: #fff;
/* 弹性布局 */
display: flex;
height: 100px;
}
.flex-item{
width: 100px;
height: 100px;
}
.bc_green{
background-color: green;
}
.bc_red{
background-color: red;
}
.bc_yellow{
background-color: yellow;
}

效果:

也可以把  flex-direction:row 放在样式中

在index.wxss中添加一个

.flex_row{
/* 排列方式 */
flex-direction: row;
}

index.wxml改为:

<!-- 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_yellow'></view>
</view>

如果放置了多个 view 会怎么样呢?

从 flex-item 样式可知,每个 view 的尺寸是 100*100,单位是像素(px),如果放置过多,可能会发生如下两种情况。

1.压缩view的宽度

2.折行

第一种情况:

<!-- 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_yellow'></view>
<view class='flex-item bc_green'></view>
<view class='flex-item bc_red'></view>
<view class='flex-item bc_yellow'></view>
<view class='flex-item bc_green'></view>
<view class='flex-item bc_red'></view>
<view class='flex-item bc_yellow'></view>
</view>

发生了宽度压缩全部挤在了一行上

为了不让它被压缩 要让它自动换行就要采用  折行

水平折行排列

要想让 view 折行,只需要加一个 flex-wrap:wrap 即可,代码如下:

<!-- index.wxml -->
<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_yellow'></view>
<view class='flex-item bc_red'></view>
<view class='flex-item bc_green'></view>
<view class='flex-item bc_red'></view>
<view class='flex-item bc_yellow'></view>
<view class='flex-item bc_green'></view>
<view class='flex-item bc_yellow'></view>
</view>

为了让色块显示之间不那么紧凑 改动了一下index.wxss中的样式

.flex-item{
width: 100px;
height: 100px;
margin: 10px;
}

效果如下:

选择不同的手机模拟器(如 iPhone6 Plus、iPhone5),效果可能是不同的,因为每一行能显示的彩色方块数量是不同的。

垂直排列

只需要将 flex-direction 的属性值设为 column即可

<!-- index.wxml -->
<view class='flex-wrp flex_column'>
<view class='flex-item bc_green'></view>
<view class='flex-item bc_red'></view>
<view class='flex-item bc_yellow'></view>
</view>

index.wxss做以下更改.flex-wrp{

  background-color: #fff;
/* 弹性布局 */
display: flex;
height: 400px; /* 更改 */
} .flex_column{ /* 新增 */
flex-direction: column;
}

效果如下:

如果在垂直方向上view过多也会发生压缩:

所有的子 view 都被压缩在垂直高度 300 px 的空间内(宽度未改变).

要使其折列跟折行的方式一样 只需加上 flex-wrap:wrap; 属性

.flex_column{
flex-direction: column;
flex-wrap: wrap;/*新增*/
}

折列排列是在第2列、第3列从上到下依次排列的

水平排列对齐方式

默认对齐方式为从左到右

左对齐,在 style 属性中加入 justify-content: flex-start

右对齐:flex-end

居中对齐:center

代码如下:

左对齐

<!-- index.wxml -->
<view class='flex-wrp flex_row' style='justify-content:flex-start;'>
<view class='flex-item bc_green'></view>
<view class='flex-item bc_red'></view>
</view>

效果如下:

左对齐

右对齐

居中对齐:

垂直排列对齐方式

\对于垂直排列来说,需要使用 align-items 属性(默认是左对齐),而不是 justify-content 属性,这两个属性的取值基本上相同。

右对齐:

<!-- index.wxml -->
<view class='flex-wrp flex_column' style='align-items:flex-end;'>
<view class='flex-item bc_green'></view>
<view class='flex-item bc_red'></view>
</view>

水平等间隔排列

如果想让 view 均匀地水平分别在窗口上,每两个 view 之间的间隔相同,那么就需要将 justify-content 属性的值设为 space-between,布局代码如下:

<!-- index.wxml -->
<view class='flex-wrp flex_row' style='justify-content: space-between;'>
<view class='flex-item bc_green'></view>
<view class='flex-item bc_red'></view>
<view class='flex-item bc_yellow'></view>
</view>

如果子 view 过多,并且设置为折行显示.

<!-- index.wxml -->
<view class='flex-wrp flex_row' style='justify-content: space-between;'>
<view class='flex-item bc_green'></view>
<view class='flex-item bc_red'></view>
<view class='flex-item bc_yellow'></view>
<view class='flex-item bc_green'></view>
<view class='flex-item bc_red'></view>
<view class='flex-item bc_yellow'></view>
<view class='flex-item bc_green'></view>
<view class='flex-item bc_red'></view>
</view>
.flex_row{
/* 排列方式 */
flex-direction: row;
/* 开启折行 */
flex-wrap: wrap;
}

从上图所示的效果来看,不管折多少行,同一行相邻两个 view 之间的间距都是相等的.

微信小程序开发入门学习(2):小程序的布局的更多相关文章

  1. 微信小程序开发入门学习(1):石头剪刀布小游戏

    从今天起开始捣鼓小程序了2018-12-17   10:02:15 跟着教程做了第一个入门实例有兴趣的朋友可以看看: 猜拳游戏布局 程序达到的效果 猜拳游戏的布局是纵向显示了三个组件:文本组件(tex ...

  2. 微信小程序开发入门教程

    做任何程序开发要首先找到其官方文档,微信小程序目前还在邀请内测阶段,目前官方放出了部分开发文档,经过笔者一天的查看和尝试,感觉文档并不全面,但是通过这些文档已经能够看出其大概面貌了.闲话不多说,我们先 ...

  3. 微信小程序开发:学习笔记[7]——理解小程序的宿主环境

    微信小程序开发:学习笔记[7]——理解小程序的宿主环境 渲染层与逻辑层 小程序的运行环境分成渲染层和逻辑层. 程序构造器

  4. 微信小程序开发:学习笔记[5]——JavaScript脚本

    微信小程序开发:学习笔记[5]——JavaScript脚本 快速开始 介绍 小程序的主要开发语言是 JavaScript ,开发者使用 JavaScript 来开发业务逻辑以及调用小程序的 API 来 ...

  5. 微信小程序开发:学习笔记[4]——样式布局

    微信小程序开发:学习笔记[4]——样式布局 Flex布局 新的布局方式 在小程序开发中,我们需要考虑各种尺寸终端设备上的适配.在传统网页开发,我们用的是盒模型,通过display:inline | b ...

  6. 微信小程序开发:学习笔记[3]——WXSS样式

    微信小程序开发:学习笔记[3]——WXSS样式 快速开始 介绍 WXSS(WeiXin Style Sheets)是一套用于小程序的样式语言,用于描述WXML的组件样式,也就是视觉上的效果. WXSS ...

  7. 微信小程序开发:学习笔记[2]——WXML模板

    微信小程序开发:学习笔记[2]——WXML模板 快速开始 介绍 WXML 全称是 WeiXin Markup Language,是小程序框架设计的一套标签语言,结合小程序的基础组件.事件系统,可以构建 ...

  8. 微信小程序开发:学习笔记[1]——Hello World

    微信小程序开发:学习笔记[1]——Hello World 快速开始 1.前往微信公众平台下载微信开发者工具. 地址:https://mp.weixin.qq.com/debug/wxadoc/dev/ ...

  9. 微信小程序开发:学习笔记[9]——本地数据缓存

    微信小程序开发:学习笔记[9]——本地数据缓存 快速开始 说明 本地数据缓存是小程序存储在当前设备上硬盘上的数据,本地数据缓存有非常多的用途,我们可以利用本地数据缓存来存储用户在小程序上产生的操作,在 ...

随机推荐

  1. netty之==TCP粘包/拆包问题解决之道(一)

    一.TCP粘包/拆包是什么 TCP是一个“流”协议,所谓流,就是没有界限的一长串二进制数据.TCP作为传输层协议并不不了解上层业务数据的具体含义,它会根据TCP缓冲区的实际情况进行数据包的划分,所以在 ...

  2. C#序列化结构体

    在将对象或结构体序列化成二进制数据流时,我们通常都会使用 System.Runtime.Serialization.Formatters.Binary.BinaryFormatter 类来实现, 但是 ...

  3. synchronized + volatile + ThreadLocal

    线程的共享 synchronized  +  volatile + ThreadLocal <1> synchronized 锁住的是对象,当用它来锁住一个类时,实际上也是锁的一个对象. ...

  4. EF Core 2.1 +数据库视图

    1.参考文档 https://stackoverflow.com/questions/36012616/working-with-sql-views-in-entity-framework-core ...

  5. atom markdown转换PDF 解决AssertionError: html-pdf: Failed to load PhantomJS module

    atom编辑器markdown转换PDF 解决AssertionError: html-pdf: Failed to load PhantomJS module. You have to set th ...

  6. Android getRunningTasks和getRunningAppProcesses失效

    Android 5.0以上的getRunningTasks失效,该方法可以获得在前台运行的系统进程.可以用getRunningAppProcesses方法暂时替代. android6.0以上的getR ...

  7. ChromiumFX

    序言 开发C#桌面应用程序有很多选择,比如WinForm或WPF. 这里我们用ChromiumFX. 目录 一.Centos7 从零编译Nginx+PHP+MySql 二.Centos7 从零配置Ng ...

  8. MyEclipse内存溢出问题

    今天碰到的问题,先记录下来 Console报错: Java.lang.OutOfMemoryError: PermGen space 跟着步骤: 在这里加入:-Xms800m -Xmx800m -XX ...

  9. SQL中的聚合函数

    聚合函数是对一组值执行计算并返回单一的值的函数,它经常与SELECT语句的GROUP BY子句一同使用,SQL SERVER 中具体的聚合函数如下:1. AVG 返回指定组中的平均值,空值被忽略. 例 ...

  10. java ——String , StringBuffer, StringBuilder类

    一.String类概述 1.String对象一旦创建就不能改变. 2.字符串常量池. 字符串常量池的特点:池中有则直接使用,池中没有则创建新的字符串常量. 例1: “==”  比较两个对象是否引用同一 ...