Flex布局与页面组件操作课堂笔记.pdfVIP

回顾1

Flex弹性布局2

Flex-direction属性样例3

Order/align-self属性样例4

的样例4

附录5

回顾

1.给页面组件重新赋值,使用语法

Page({

data:{

属性名:初始值

},

自定义方法:function()

{this.setData({

属性名:新值

})

}})

2.给特定组件添加(方式一)

2.1xxx.wxml

回顾.1

柔性布局.2

Flex‑direction属性样例.3

Order/align‑self属性样例.4

分割子的样例.4

附录.5

回顾

1.给页面组件重新赋值，语法

Page({data:{属性名:初始值},

自定义方法:function()

{this.setData({属性名:新

值})}})

2.给特定组件添加(方式一)

2.1xxx.wxml

viewbindtap=”tapFunc”/view

2.2xxx.js

tapFunc:function(event){

//跳转到对应的页面

//event:点击的坐标值,targets数组…..

}

Flex弹性布局

1.引言:float/position属性无法设置复杂的样式

2.Flex弹性盒子布局:是CSS的其中一个模块,涉及多个属

性,目的简单的方式实现复杂的布局

3.术语(***):

查看bindtap=“tapFunc”/view

2.2xxx.jstapFunc:function(event){//跳转

到对应的页面//event:点击的坐标值,目标内

存.}

Flex弹性布局

1.引言:float/position属性无法设置复杂的样式

2.Flex弹性盒子布局：是CSS的其中一个模块，涉及多个

属性，目的简单的方式实现复杂的布局

3.术语(***):

3.1主轴:默认是和x轴重合

3.2侧轴/十字轴:垂直于主轴

3.3Flexcontainer容器:包含item的父盒子

3.4Flex项item:是容器的子盒子

4.Flex弹性布局涉及属性

4.1作用在容器上的属性

a.flex-direction:设置主轴的方向

b.justify-content:设置item在主轴上的对齐方式

c.align-items:设置item在侧轴