微信小程序 flexbox layout快速实现基本布局的解决方案


Posted in Javascript onMarch 24, 2020

问题描述

flexbox layout ——弹性盒子布局。弹性盒子可以快速的对小程序进行布局。一般传统的小程序布局方法对内容量少的页面而言很方便,但对页面比较复杂的来讲就很繁琐了。所以使用 flexbox layout 对小程序页面内容进行整体封装布局,这样既方便又快捷。那么如何使用弹性盒子快速实现小程序的基本布局呢?

传统的布局方式对布局目标的实现属性赋值非常的分散,严重依赖内容的大小和页面的结构,这样操作起来非常的麻烦。而弹性盒子就比较灵活、统一,可以对整个页面的布局进行总体把控设置。弹性盒子就是将页面的内容整体放进一个容器里面进行整体的有结构的布局设置让页面更加和谐。

解决方案

首先,对 flexbox layout 的使用方法进行简单介绍。

先将所需封装的内容放在一个 view 容器里面,再对该 view 容器定义一个 class 。然后需要在 wxss 里面对 class 进行设置布局。

在 wxss 中首先用 display : flex 将 view 容器变成一个弹性盒子,但是弹性盒子默认的主轴方向是从左往右所以每个元素都是从左往右的放置。根据自己的需要修改主轴的方向。

这里以从上往下的主轴方向,垂直方向上均匀分布,元素在水平方向上居中显示为例。在 wxss 用 flex-direction : column 来实现从上到下的布局。但是会发现段与段之间太紧促了,这个时候就需要让段落均匀分布,用 justify-content : space-around 来实现。(注意:在使用 justify-content 的时候我们需要根据自己设置的布局方向对页面的高度(宽度)进行适配,小程序会根据你所设置的对段落间的空间进行调整。)。最后让元素在水平方向上居中显示,需要用 align-items : center 来实现。

下面是用两个弹性盒子(一个是垂直方向,另一个是水平方向)布局的案例代码:

表 3.1.wxml 代码

<view>
<image src="/pages/img/ 宣传图 2.jpg"></image>
<text> 从我做起 </text>
<text> 不信谣!不传谣! </text>
<text> 相信政府!相信国家! </text>
</view>
<view>
<text> 戴口罩,勤洗手 </text>
<text> 不扎堆,拒聚餐 </text>
<text> 吃熟食,禁野味 </text>
<text> 常通风,勿恐慌 </text>
<text> 早就医,莫轻视 </text> 
</view>

表 3.2.wxss 代码

.container1{
height: 80vh;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
color: red;
background-color: yellow
}
.container2{
background-color: yellow;
height: 20vh;
width: 70vh;
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
color:blue
}
.view1{
height: 650rpx;
width: 550rpx
}

效果图展示:

微信小程序 flexbox layout快速实现基本布局的解决方案

图 3.1

flexbox layout 的属性总结:

弹性盒子布局具有六大属性:

( 1 ) flex-direction 属性决定主轴的方向

row (默认值):主轴为水平方向,起点在左端。

row-reverse:主轴为水平方向,起点在右端。

column :主轴为垂直方向,起点在上沿。

column-reverse :主轴为垂直方向,起点在下沿

( 2 ) flex-wrap属性决定元素的换行

nowrap (默认):不换行。

wrap :换行,第一行在上方

wrap-reverse:换行,第一行在下方。

( 3 ) flex-flow 属性是 flex-direction 属性和 flex-wrap 属性的简写形式

( 4 ) justify-content 属性定义内容在主轴上的对齐方式。

flex-start(默认值):左对齐。

flex-end:右对齐。

center : 居中。

space-between:两端对齐,项目之间的间隔都相等。

space-around:每个项目两侧的间隔相等。

( 5 ) align-items 属性定义项目在交叉轴上如何对齐。

flex-start:交叉轴的起点对齐。

flex-end:交叉轴的终点对齐。

center :交叉轴的中点对齐。

baseline: 项目的第一行文字的基线对齐。

stretch(默认值):如果项目未设置高度或设为auto ,将占满整个容器的高度。

( 6 ) align-content 属性定义了多根轴线的对齐方式

flex-start:与交叉轴的起点对齐。

flex-end:与交叉轴的终点对齐。

center :与交叉轴的中点对齐。

space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。

space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。

stretch(默认值):轴线占满整个交叉轴。

结语

flexbox layout 弹性盒子布局以上只是介绍了简单的容器属性。由上面的介绍和代码例子可以看出用它来对页面布局非常的方便和快捷,所写的代码也十分精简。掌握弹性盒子的容器属性就可以轻松的玩转小程序的页面布局,高效又简单。

到此这篇关于微信小程序 flexbox layout快速实现基本布局的解决方案的文章就介绍到这了,更多相关小程序flexbox layout布局内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
asp.net下利用js实现返回上一页的实现方法小集
Nov 24 Javascript
JavaScript基本编码模式小结
May 23 Javascript
JavaScript Scoping and Hoisting 翻译
Jul 03 Javascript
jQuery(非HTML5)可编辑表格实现代码
Dec 11 Javascript
关于jquery.validate1.9.0前台验证的使用介绍
Apr 26 Javascript
js脚本实现数据去重
Nov 27 Javascript
实例讲解jquery与json的结合
Jan 07 Javascript
React数据传递之组件内部通信的方法
Dec 31 Javascript
微信小程序—setTimeOut定时器的问题及解决
Jul 26 Javascript
vue实现虚拟列表功能的代码
Jul 28 Javascript
VUE : vue-cli中去掉路由中的井号#操作
Sep 04 Javascript
JavaScript 中判断变量是否为数字的示例代码
Oct 22 Javascript
安装多版本Vue-CLI的实现方法
Mar 24 #Javascript
js实现页面图片消除效果
Mar 24 #Javascript
js实现消灭星星(web简易版)
Mar 24 #Javascript
JavaScript实现移动端带transition动画的轮播效果
Mar 24 #Javascript
javascript实现滚动条效果
Mar 24 #Javascript
Webpack中SplitChunksPlugin 配置参数详解
Mar 24 #Javascript
JS实现点星星消除小游戏
Mar 24 #Javascript
You might like
php ctype函数中文翻译和示例
2014/03/21 PHP
免费的ip数据库淘宝IP地址库简介和PHP调用实例
2014/04/08 PHP
php以fastCGI的方式运行时文件系统权限问题及解决方法
2015/05/11 PHP
tp5.1 实现setInc字段自动加1
2019/10/18 PHP
jQuery EasyUI API 中文文档 - PropertyGrid属性表格
2011/11/18 Javascript
javascript学习笔记(十) js对象 继承
2012/06/19 Javascript
JS 毫秒转时间示例代码
2013/09/22 Javascript
页面js遇到乱码问题的解决方法是和无法转码的情况
2014/04/30 Javascript
extjs 分页使用jsp传递数据示例
2014/07/29 Javascript
仿JQuery输写高效JSLite代码的一些技巧
2015/01/13 Javascript
JS实现5秒钟自动封锁div层的方法
2015/02/20 Javascript
jQuery实现的经典竖向伸缩菜单效果代码
2015/09/24 Javascript
概述VUE2.0不可忽视的很多变化
2016/09/25 Javascript
使用jquery.qrcode.js生成二维码插件
2016/10/17 Javascript
NodeJS实现客户端js加密
2017/01/09 NodeJs
js模拟支付宝密码输入框
2017/04/11 Javascript
Vue.js教程之axios与网络传输的学习实践
2017/04/29 Javascript
javascript获取指定区间范围随机数的方法
2017/09/08 Javascript
JavaScript动态添加数据到表单并提交的几种方式
2019/06/26 Javascript
[03:26]《DAC最前线》之EG经理自述DOTA2经历
2015/02/02 DOTA
Python 使用PIL numpy 实现拼接图片的示例
2018/05/08 Python
python os用法总结
2018/06/08 Python
使用python PIL库实现简单验证码的去噪方法步骤
2019/05/10 Python
python try except返回异常的信息字符串代码实例
2019/08/15 Python
Python Django2 model 查询介绍(条件、范围、模糊查询)
2020/03/16 Python
python算的上脚本语言吗
2020/06/22 Python
详解在Python中使用Torchmoji将文本转换为表情符号
2020/07/27 Python
Python 如何创建一个简单的REST接口
2020/07/30 Python
Python操作dict时避免出现KeyError的几种解决方法
2020/09/20 Python
Python安装Bs4的多种方法
2020/11/28 Python
ORLY官网:美国专业美甲一线品牌
2019/12/11 全球购物
物业门卫岗位职责
2013/12/28 职场文书
出纳员岗位职责
2014/03/13 职场文书
购房协议书范本
2014/10/02 职场文书
详解Java ES多节点任务的高效分发与收集实现
2021/06/30 Java/Android
阿里云日志过滤器配置日志服务
2022/04/09 Servers