目录
一,flex弹性布局
1.什么是flex布局?
1) Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。
2) 任何一个容器都可以指定为Flex布局。
3) display: ‘flex’
容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size。
2.flex属性
flex-direction 主轴的方向 默认为row
flex-wrap 如果一条轴线排不下,如何换行
flex-flow 是flex-direction属性和flex-wrap属性的简写形式
justify-content 定义了项目在主轴上的对齐方式
align-items 定义项目在交叉轴上如何对齐
align-content 属性定义了多根轴线的对齐方式
注意,设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。
Flex 布局语法教程 | 菜鸟教程学习地址:Flex 布局语法教程 | 菜鸟教程
3.视图层 View
框架的视图层由 WXML 与 WXSS 编写,由组件来进行展示。
将逻辑层的数据反映成视图,同时将视图层的事件发送给逻辑层。
WXML(WeiXin Markup language) 用于描述页面的结构。
WXS(WeiXin Script) 是小程序的一套脚本语言,结合
WXML
,可以构建出页面的结构。WXSS(WeiXin Style Sheet) 用于描述页面的样式。
组件(Component)是视图的基本组成单元。
WXML
WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件、事件系统,可以构建出页面的结构。
要完整了解 WXML 语法,请参考WXML 语法参考。
用以下一些简单的例子来看看 WXML 具有什么能力:
1数据绑定
<!--wxml--> <view> { {message}} </view> // page.js Page({ data: { message: 'Hello MINA!' } })
2.列表渲染
<!--wxml--> <view wx:for="{ {array}}"> { {item}} </view> // page.js Page({ data: { array: [1, 2, 3, 4, 5] } })
3.条件渲染
<!--wxml--> <view wx:if="{ {view == 'WEBVIEW'}}"> WEBVIEW </view> <view wx:elif="{ {view == 'APP'}}"> APP </view> <view wx:else="{ {view == 'MINA'}}"> MINA </view> // page.js Page({ data: { view: 'MINA' } })
4.模板
<!--wxml--> <template name="staffName"> <view> FirstName: { {firstName}}, LastName: { {lastName}} </view> </template> <template is="staffName" data="{ {...staffA}}"></template> <template is="staffName" data="{ {...staffB}}"></template> <template is="staffName" data="{ {...staffC}}"></template> // page.js Page({ data: { staffA: {firstName: 'Hulk', lastName: 'Hu'}, staffB: {firstName: 'Shang', lastName: 'You'}, staffC: {firstName: 'Gideon', lastName: 'Lin'} } })
具体的能力以及使用方式在以下章节查看: