微信小程序组件解读和分析:一、view(视图容器 )

view组件说明:
    视图容器
    跟HTML代码中的DIV一样,可以包裹其他的组件,也可以被包裹在其他的组件内部。用起来比较自由随意,没有固定的结构。

view组件的用法:

161827eq2ggotqc2kgblo4.png 

示例项目的wxml代码:

[XML] 纯文本查看 复制代码

?

01

02

03

04

05

06

07

08

09

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

<view  class="btnGroup">

        <view class="item orange" >退格</view>

        <view class="item orange" >清屏</view>

        <view class="item orange" >+/-</view>

        <view class="item orange" >+</view>

      </view>

      <view  class="btnGroup">

        <view class="item blue" >9</view>

        <view class="item blue" >8</view>

        <view class="item blue" >7</view>

        <view class="item orange" >-</view>

      </view>

      <view  class="btnGroup">

        <view class="item blue" >6</view>

        <view class="item blue" >5</view>

        <view class="item blue" >4</view>

        <view class="item orange" >×</view>

      </view>

      <view  class="btnGroup">

        <view class="item blue" >3</view>

        <view class="item blue" >2</view>

        <view class="item blue" >1</view>

        <view class="item orange" >÷</view>

      </view>

      <view  class="btnGroup">

        <view class="item blue" >0</view>

        <view class="item blue" >.</view>

        <view class="item blue" >历史</view>

        <view class="item orange" >=</view>

      </view>



示例项目的WXSS代码:

[CSS] 纯文本查看 复制代码

?

01

02

03

04

05

06

07

08

09

10

11

12

13

14

.btnGroup{

    display:flex;

    flex-direction:row;

}

.orange{

    color: #fef4e9;

    border: solid 1px #da7c0c;

    background: #f78d1d;

}

.blue{

    color: #d9eef7;

    border: solid 1px #0076a3;

    background: #0095cd;

}



视图样式flex-direction: row的效果图:
161827w26zgvdtuguj6uj2.png 
WXML代码如下

[XML] 纯文本查看 复制代码

?

1

2

3

4

5

<view class="flex-wrp">

    <view class="flex-item red" ></view>

    <view class="flex-item green" ></view>

    <view class="flex-item blue" ></view>

</view>



WXSS代码如下:

[CSS] 纯文本查看 复制代码

?

01

02

03

04

05

06

07

08

09

10

11

12

13

14

15

16

17

18

.flex-wrp{

    height: 100px;

    display:flex;

    background-color: #FFFFFF;

}

.flex-item{

    width: 100px;

    height: 100px;

}

.red{

    background: red;

}

.green{

    background: green;

}

.blue{

    background: blue;

}



视图样式flex-direction: column的效果图:
161827nbbzb0zsmoe00i55.png 


WXML代码如下:

[XML] 纯文本查看 复制代码

?

1

2

3

4

5

<view class="flex-wrp column">

    <view class="flex-item" style="background: red"></view>

    <view class="flex-item" style="background: green"></view>

    <view class="flex-item" style="background: blue"></view>

</view>



WXSS代码如下:

[CSS] 纯文本查看 复制代码

?

01

02

03

04

05

06

07

08

09

10

11

12

13

14

15

16

17

18

19

20

21

.column{

   flex-direction:column;

}

.flex-item{

    width: 100px;

    height: 100px;

}

.flex-wrp{

    height: 100px;

    display:flex;

    background-color: #FFFFFF;

}

.red{

    background: red;

}

.green{

    background: green;

}

.blue{

    background: blue;

}



视图样式justify-content: flex-start的效果图:
161828zinpw3wwko6ckesc.png 

WXML代码如下:

[XML] 纯文本查看 复制代码

?

1

2

3

4

5

<view class="flex-wrp flex-start">

    <view class="flex-item" style="background: red"></view>

    <view class="flex-item" style="background: green"></view>

    <view class="flex-item" style="background: blue"></view>

</view>



WXSS代码如下:

[CSS] 纯文本查看 复制代码

?

01

02

03

04

05

06

07

08

09

10

11

12

13

14

15

16

17

18

19

20

21

22

.flex-start{

    flex-direction:row;

    justify-content: flex-start;

}

.flex-wrp{

    height: 100px;

    display:flex;

    background-color: #FFFFFF;

}

.flex-item{

    width: 100px;

    height: 100px;

}

.red{

    background: red;

}

.green{

    background: green;

}

.blue{

    background: blue;

}


视图样式justify-content: flex-end的效果图:
161828db46pb6k5p6bvd4u.png 

WXML代码如下:

[XML] 纯文本查看 复制代码

?

1

2

3

4

5

<view class="flex-wrp flex-end">

    <view class="flex-item" style="background: red"></view>

    <view class="flex-item" style="background: green"></view>

    <view class="flex-item" style="background: blue"></view>

</view>



WXSS代码如下:

[CSS] 纯文本查看 复制代码

?

01

02

03

04

05

06

07

08

09

10

11

12

13

14

15

16

17

18

19

20

21

22

.flex-end{

    flex-direction:row;

    justify-content: flex-end;

}

.flex-wrp{

    height: 100px;

    display:flex;

    background-color: #FFFFFF;

}

.flex-item{

    width: 100px;

    height: 100px;

}

.red{

    background: red;

}

.green{

    background: green;

}

.blue{

    background: blue;

}



视图样式justify-content: center的效果图:
161828gy4vp314jg1y47vt.png 

WXML代码如下:

[XML] 纯文本查看 复制代码

?

1

2

3

4

5

<view class="flex-wrp justify-content-center">

    <view class="flex-item" style="background: red"></view>

    <view class="flex-item" style="background: green"></view>

    <view class="flex-item" style="background: blue"></view>

</view>



WXSS代码如下:

[CSS] 纯文本查看 复制代码

?

01

02

03

04

05

06

07

08

09

10

11

12

13

14

15

16

17

18

19

20

21

22

.justify-content-center{

    flex-direction:row;

    justify-content: center;

}

.flex-wrp{

    height: 100px;

    display:flex;

    background-color: #FFFFFF;

}

.flex-item{

    width: 100px;

    height: 100px;

}

.red{

    background: red;

}

.green{

    background: green;

}

.blue{

    background: blue;

}



视图样式justify-content: space-between的效果图:
161828mo6gmzlvzi6yjmog.png 

WXML代码如下:

[XML] 纯文本查看 复制代码

?

1

2

3

4

5

<view class="flex-wrp space-between">

  <view class="flex-item" style="background: red"></view>

  <view class="flex-item" style="background: green"></view>

  <view class="flex-item" style="background: blue"></view>

</view>



WXSS代码如下:

[CSS] 纯文本查看 复制代码

?

01

02

03

04

05

06

07

08

09

10

11

12

13

14

15

16

17

18

19

20

21

22

.space-between{

  flex-direction:row;

  justify-content: space-between;

}

.flex-wrp{

  height: 100px;

  display:flex;

  background-color: #FFFFFF;

}

.flex-item{

  width: 100px;

  height: 100px;

}

.red{

  background: red;

}

.green{

  background: green;

}

.blue{

  background: blue;

}



视图样式justify-content: space-around的效果图:
161828o69230z42zi1a6ez.png 

WXML代码如下:

[XML] 纯文本查看 复制代码

?

1

2

3

4

5

<view class="flex-wrp space-around">

    <view class="flex-item" style="background: red"></view>

    <view class="flex-item" style="background: green"></view>

    <view class="flex-item" style="background: blue"></view>

</view>



WXSS代码如下:

[CSS] 纯文本查看 复制代码

?

01

02

03

04

05

06

07

08

09

10

11

12

13

14

15

16

17

18

19

20

21

22

.space-around{

    flex-direction:row;

    justify-content: space-around;

}

.flex-wrp{

    height: 100px;

    display:flex;

    background-color: #FFFFFF;

}

.flex-item{

    width: 100px;

    height: 100px;

}

.red{

    background: red;

}

.green{

    background: green;

}

.blue{

    background: blue;

}



视图样式align-items: flex-end的效果图:
161829mh7w8zsxy10w0zw0.png 

WXML代码如下:

[XML] 纯文本查看 复制代码

?

1

2

3

4

5

<view class="flex-wrp align-items-flex-end">

    <view class="flex-item" style="background: red"></view>

    <view class="flex-item" style="background: green"></view>

    <view class="flex-item" style="background: blue"></view>

</view>



WXSS代码如下:

[CSS] 纯文本查看 复制代码

?

01

02

03

04

05

06

07

08

09

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

.align-items-flex-end{

    height: 200px;

    flex-direction:row;

    justify-content: center;

    align-items: flex-end;

}

.flex-wrp{

    height: 100px;

    display:flex;

    background-color: #FFFFFF;

}

.flex-item{

    width: 100px;

    height: 100px;

}

.red{

    background: red;

}

.green{

    background: green;

}

.blue{

    background: blue;

}



视图样式align-items: center的效果图:
161829fso9oiqwyvffwwvn.png 

WXML代码如下:

[XML] 纯文本查看 复制代码

?

1

2

3

4

5

<view class="flex-wrp align-items-center">

    <view class="flex-item" style="background: red"></view>

    <view class="flex-item" style="background: green"></view>

    <view class="flex-item" style="background: blue"></view>

</view>



WXSS代码如下:

[CSS] 纯文本查看 复制代码

?

01

02

03

04

05

06

07

08

09

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

.align-items-center{

    height: 200px;

    flex-direction:row;

    justify-content: center;

    align-items: center;

}

.flex-wrp{

    height: 100px;

    display:flex;

    background-color: #FFFFFF;

}

.flex-item{

    width: 100px;

    height: 100px;

}

.red{

    background: red;

}

.green{

    background: green;

}

.blue{

    background: blue;

}



视图样式align-items: flex-start的效果图:
161829vipnjsfrr00m2222.png 
WXML代码如下:

[XML] 纯文本查看 复制代码

?

1

2

3

4

5

<view class="flex-wrp align-items-flex-start">

    <view class="flex-item" style="background: red"></view>

    <view class="flex-item" style="background: green"></view>

    <view class="flex-item" style="background: blue"></view>

</view>



WXSS代码如下:

[CSS] 纯文本查看 复制代码

?

01

02

03

04

05

06

07

08

09

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

.align-items-flex-start{

    height: 200px;

    flex-direction:row;

    justify-content: center;

    align-items: flex-start;

}

.flex-wrp{

    height: 100px;

    display:flex;

    background-color: #FFFFFF;

}

.flex-item{

    width: 100px;

    height: 100px;

}

.red{

    background: red;

}

.green{

    background: green;

}

.blue{

    background: blue;

}

 

主要属性:

排列方式(flex-direction),用于wxss

 

属性

描述

row

横向排列

column

纵向排列


弹性项目内容对齐(justify-content),用于wxss

 

属性

描述

flex-start

弹性项目向行头紧挨着填充

flex-end

弹性项目向行尾紧挨着填充

center

弹性项目居中紧挨着填充

space-between

弹性项目平均分布在该行上

space-around

弹性项目平均分布在该行上,两边留有一半的间隔空间


项目在容器内侧轴方位的对齐方式(align-items),用于wxss

 

属性

描述

stretch

默认值,弹性项目被拉伸以适应容器

center

弹性项目位于容器的中心

flex-start

弹性项目位于容器的开头

flex-end

弹性项目位于容器的结尾

baseline

弹性项目位于容器的基线上

 

点击查看原文

转载于:https://my.oschina.net/u/3219750/blog/869571

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值