微信小程序实战开发六:使用weui-flex创建一个可自由配置的布局组件。
个人认为 weui-flex 在小程序布局方面发挥了重大的作用。为开发人员提供了极其便利的布局环境,尤其对于我们我种代码怪来说,前端布局很多时候是有一些困难的,但有了weui-flex页面布局从此不在是问题 。
先介绍一下flex应用:百度查了一下发现在一篇文章地址(http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html)
这里面介绍了 Flex 布局教程 只要认真研究一下 Flex 的各种属性。相信你也会变成布局高手。
2009年,W3C 提出了一种新的方案----Flex 布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。
Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为 Flex 布局。只要将它的 display属性设置为 flex / inline-flex / -webkit-flex; /* Safari */ 这样就可以了。
需要注意的是:设为 Flex 布局以后,子元素的float、clear和vertical-align属性将失效。
在小程序开发者工具里面,我们可以看到默认的 weui-flex 它设置的 display 属性。
flex有六个属性设置可以用在容器上
flex-direction 属性决定主轴的方向(即项目的排列方向)
值有:flex-direction: row | row-reverse | column | column-reverse;
row(默认值):主轴为水平方向,起点在左端。
row-reverse:主轴为水平方向,起点在右端。
column:主轴为垂直方向,起点在上沿。
column-reverse:主轴为垂直方向,起点在下沿。
flex-wrap 默认情况下,项目都排在一条线(又称"轴线")上。flex-wrap属性定义,如果一条轴线排不下,如何换行。
值有:flex-wrap: nowrap | wrap | wrap-reverse;
nowrap(默认):不换行。
wrap:换行,第一行在上方。
wrap-reverse:换行,第一行在下方。
flex-flow flex-flow 属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。
flex-flow: flex-direction> || flex-wrap;
justify-content 属性定义了项目在主轴上的对齐方式。
值有:justify-content: flex-start | flex-end | center | space-between | space-around;
flex-start(默认值):左对齐
flex-end:右对齐
center:居中
space-between:两端对齐,项目之间的间隔都相等。
space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。
align-items 属性定义项目在交叉轴上如何对齐。
值有:align-items: flex-start | flex-end | center | baseline | stretch;
flex-start:交叉轴的起点对齐。
flex-end:交叉轴的终点对齐。
center:交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。
align-content 属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
flex-start:与交叉轴的起点对齐。
flex-end:与交叉轴的终点对齐。
center:与交叉轴的中点对齐。
space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
stretch(默认值):轴线占满整个交叉轴。
另外还有六个项目属性 :
order 属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。
flex-grow 属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。如果所有项目的flex-grow属性都为1,则它们将等分剩余空间(如果有的话)。如果一个项目的flex-grow属性为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍。
flex-shrink 属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。负值对该属性无效。
flex-basis 属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。它可以设为跟width或height属性一样的值(比如350px),则项目将占据固定空间。
flex 属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。
align-self 属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。
align-self: auto | flex-start | flex-end | center | baseline | stretch;
搞明白布局之后,我们就可以开始动手制作,把FLEX做成可动态调用的组件。这样以后使用的时候就方便很多了。
第一步:建立 flex 组件
第二步:配置 组件信息
wxml文件,默认的weui-flex在小程序里面有默认样式不用管,我们把单个列表 flexitem 和 图标 fleximg 文本 flextext这几项设置为自定义的CSS,其它几个参数就是数组 内容。
<view class="weui-flex" >
<view class="weui-flex__item" wx:for="{{Flexs}}" wx:key="id">
<view class="{{FlexItem}}" bindtap="flexLink" data-linktype="{{item.LinkType}}" data-url="{{item.LinkUrl}}">
<image class="{{FlexImg}}" src="{{item.IconUrl}}"/>
<view>
<text class="{{FlexText}}">{{item.IconText}}</text>
</view>
</view>
</view>
</view>
js文件:options里面的 addGlobalClass 这个很重要,设置了这个为true之后才可以使用外部CSS,这样才能满足我们设想的需求,在调用组件的页面直接调用flex组件,然后通过传值把在CSS文件中设置的几个样式文件名传进去。这样就可以实现在调用页面自由控制展示样式。满足不同布局的需求。
Component({
options: {
addGlobalClass: true,
},
//上面 addGlobalClass: true 设置了可以使用外部CSS,这样就可以内外配合起来用了。
/**
* 组件的属性列表
*/
properties: {
FlexItem: String,
FlexImg: String,
FlexText: String,
Flexs: Array
},
第三步:在页面中引用,引用的时候可以把我们定义的CSS样式名称及数组内容传进去。
<my-flex FlexItem="flexList" FlexImg="flexIcon" FlexText="FlexText" Flexs="{{indexFlex1}}"></my-flex>
传了内容之后效果就完成了。
我们制作了一个 两行 三列的布局,并配合图标及文字完成了一个小导航设置。
总结:flex布局功能很强大,在小程序开发过程中确实可以减少很多开发时长。。
- 备库CPU使用异常优化(r6笔记第73天)
- 数据清理的遗留问题处理(二)(r6笔记第91天)
- Kaggle Titanic 生存预测比赛超完整笔记(上)
- 多系统交互中DBA需要实现的技术细节(r6笔记第90天)
- Kaggle Titanic 生存预测比赛超完整笔记(中)
- SDP(11):MongoDB-Engine功能实现
- SDP(10):文本式大数据运算环境-MongoDB-Engine功能设计
- Kaggle Titanic 生存预测比赛超完整笔记(下)
- SDP(9):MongoDB-Scala - data access and modeling
- 数据清理的遗留问题处理(r6笔记第87天)
- 一次DB time抖动发现的expdp的bug(r6笔记第86天)
- Python中map函数
- 10g,11g中数据库静默安装中的细小差别(r6笔记第85天)
- SDP(8):文本式数据库-MongoDB-Scala基本操作
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 团体程序设计天梯赛-练习集 L1-035 情人节
- 团体程序设计天梯赛-练习集 L1-038 新世界
- 团体程序设计天梯赛-练习集 L1-040 最佳情侣身高差
- 团体程序设计天梯赛-练习集 L1-041 寻找250
- 十年磨一剑!腾讯QQ Linux版 2.0.0 Beta重磅发布!
- 团体程序设计天梯赛-练习集 L1-045 宇宙无敌大招呼
- 团体程序设计天梯赛-练习集 L1-047 装睡
- 团体程序设计天梯赛-练习集 L1-052 2018我们要赢
- 团体程序设计天梯赛-练习集 L1-053 电子汪
- 团体程序设计天梯赛-练习集 L1-056 猜数字
- PAT (Basic Level) Practice (中文)1001 害死人不偿命的(3n+1)猜想
- PAT (Basic Level) Practice (中文)1002 写出这个数
- PAT (Basic Level) Practice (中文)1004 成绩排名
- PAT (Basic Level) Practice (中文)1006 换个格式输出整数
- PAT (Basic Level) Practice (中文)1008 数组元素循环右移问题