微信小程序开发入门学习(2):小程序的布局
概述
小程序的布局采用了和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):石头剪刀布小游戏
从今天起开始捣鼓小程序了2018-12-17 10:02:15 跟着教程做了第一个入门实例有兴趣的朋友可以看看: 猜拳游戏布局 程序达到的效果 猜拳游戏的布局是纵向显示了三个组件:文本组件(tex ...
- 微信小程序开发入门教程
做任何程序开发要首先找到其官方文档,微信小程序目前还在邀请内测阶段,目前官方放出了部分开发文档,经过笔者一天的查看和尝试,感觉文档并不全面,但是通过这些文档已经能够看出其大概面貌了.闲话不多说,我们先 ...
- 微信小程序开发:学习笔记[7]——理解小程序的宿主环境
微信小程序开发:学习笔记[7]——理解小程序的宿主环境 渲染层与逻辑层 小程序的运行环境分成渲染层和逻辑层. 程序构造器
- 微信小程序开发:学习笔记[5]——JavaScript脚本
微信小程序开发:学习笔记[5]——JavaScript脚本 快速开始 介绍 小程序的主要开发语言是 JavaScript ,开发者使用 JavaScript 来开发业务逻辑以及调用小程序的 API 来 ...
- 微信小程序开发:学习笔记[4]——样式布局
微信小程序开发:学习笔记[4]——样式布局 Flex布局 新的布局方式 在小程序开发中,我们需要考虑各种尺寸终端设备上的适配.在传统网页开发,我们用的是盒模型,通过display:inline | b ...
- 微信小程序开发:学习笔记[3]——WXSS样式
微信小程序开发:学习笔记[3]——WXSS样式 快速开始 介绍 WXSS(WeiXin Style Sheets)是一套用于小程序的样式语言,用于描述WXML的组件样式,也就是视觉上的效果. WXSS ...
- 微信小程序开发:学习笔记[2]——WXML模板
微信小程序开发:学习笔记[2]——WXML模板 快速开始 介绍 WXML 全称是 WeiXin Markup Language,是小程序框架设计的一套标签语言,结合小程序的基础组件.事件系统,可以构建 ...
- 微信小程序开发:学习笔记[1]——Hello World
微信小程序开发:学习笔记[1]——Hello World 快速开始 1.前往微信公众平台下载微信开发者工具. 地址:https://mp.weixin.qq.com/debug/wxadoc/dev/ ...
- 微信小程序开发:学习笔记[9]——本地数据缓存
微信小程序开发:学习笔记[9]——本地数据缓存 快速开始 说明 本地数据缓存是小程序存储在当前设备上硬盘上的数据,本地数据缓存有非常多的用途,我们可以利用本地数据缓存来存储用户在小程序上产生的操作,在 ...
随机推荐
- netty之==TCP粘包/拆包问题解决之道(一)
一.TCP粘包/拆包是什么 TCP是一个“流”协议,所谓流,就是没有界限的一长串二进制数据.TCP作为传输层协议并不不了解上层业务数据的具体含义,它会根据TCP缓冲区的实际情况进行数据包的划分,所以在 ...
- C#序列化结构体
在将对象或结构体序列化成二进制数据流时,我们通常都会使用 System.Runtime.Serialization.Formatters.Binary.BinaryFormatter 类来实现, 但是 ...
- synchronized + volatile + ThreadLocal
线程的共享 synchronized + volatile + ThreadLocal <1> synchronized 锁住的是对象,当用它来锁住一个类时,实际上也是锁的一个对象. ...
- EF Core 2.1 +数据库视图
1.参考文档 https://stackoverflow.com/questions/36012616/working-with-sql-views-in-entity-framework-core ...
- 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 ...
- Android getRunningTasks和getRunningAppProcesses失效
Android 5.0以上的getRunningTasks失效,该方法可以获得在前台运行的系统进程.可以用getRunningAppProcesses方法暂时替代. android6.0以上的getR ...
- ChromiumFX
序言 开发C#桌面应用程序有很多选择,比如WinForm或WPF. 这里我们用ChromiumFX. 目录 一.Centos7 从零编译Nginx+PHP+MySql 二.Centos7 从零配置Ng ...
- MyEclipse内存溢出问题
今天碰到的问题,先记录下来 Console报错: Java.lang.OutOfMemoryError: PermGen space 跟着步骤: 在这里加入:-Xms800m -Xmx800m -XX ...
- SQL中的聚合函数
聚合函数是对一组值执行计算并返回单一的值的函数,它经常与SELECT语句的GROUP BY子句一同使用,SQL SERVER 中具体的聚合函数如下:1. AVG 返回指定组中的平均值,空值被忽略. 例 ...
- java ——String , StringBuffer, StringBuilder类
一.String类概述 1.String对象一旦创建就不能改变. 2.字符串常量池. 字符串常量池的特点:池中有则直接使用,池中没有则创建新的字符串常量. 例1: “==” 比较两个对象是否引用同一 ...