海阳之新's博客

每天进步一点点...

0%

微信小程序学习之view组件

发表于 分类于 Valine：
本文字数： 4.8k 阅读时长 ≈ 4 分钟

一、实现效果

二、代码部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<!--学习view组件-->
<view class="title">学习view组件</view>
<view class="student">2016/11/22 vsiryxm@qq.com</view>
<view>
    <text>
    \n1、从今天开始好好学习WeApp\n
    2、我的理解是view相当于h5中的div,用来划分页面大块区域。\n
    3、目录下只要有wxml文件就能运行，其他格式文件都可以忽略没有。\n
    4、但目录下如果有.json格式文件就不能为空，否则无法运行。\n
    </text>
</view>
<view><text>\n下面学习几种排列法：弹性框模型</text></view>
<view>
    <text>\n弹性框模型分为弹性容器以及弹性项目。\n当组件的display为flex或inline-flex时，该组件则为弹性容器，弹性容器的子组件为弹性项目。</text>
    <text>\n
    flex-direction：主要两个特性”row”横向排列”column”纵向排列\n
    justify-content 主轴的对齐方式（如果flex-direction为row则主轴就是水平方向）\n
    可选属性 (‘flex-start’, ‘flex-end’, ‘center’, ‘space-between’, ‘space-around’)\n
    align-items 侧轴对齐方式如果flex-direction为row则侧轴就是垂直方向）\n
    可选属性 (‘flex-start’, ‘flex-end’, ‘center’）\n\n</text>
</view>
<view class="section">
    <view>flex-direction:row</view>
    <view class="flex-wrp" style="flex-direction:row;">
        <view class="flex-item bc_green">1</view>
        <view class="flex-item bc_red">2</view>
        <view class="flex-item bc_blue">3</view>
    </view>

    <view>flex-direction:column</view>
    <view class="flex-wrp" style="height:300px;flex-direction:column;">
        <view class="flex-item bc_green">1</view>
        <view class="flex-item bc_red">2</view>
        <view class="flex-item bc_blue">3</view>
    </view>

    <view><text>flex-direction:row \n justify-content:flex-start</text></view>
    <view class="flex-wrp" style="flex-direction:row;justify-content:flex-start;">
        <view class="flex-item bc_green">1</view>
        <view class="flex-item bc_red">2</view>
        <view class="flex-item bc_blue">3</view>
    </view>

    <view><text>flex-direction:row \n justify-content:flex-end</text></view>
    <view class="flex-wrp" style="flex-direction:row;justify-content:flex-end;">
        <view class="flex-item bc_green">1</view>
        <view class="flex-item bc_red">2</view>
        <view class="flex-item bc_blue">3</view>
    </view>
</view>

<view class="section">
    <view><text>flex-direction:row \n justify-content:center</text></view>
    <view class="flex-wrp" style="flex-direction:row;justify-content: center;">
        <view class="flex-item bc_green">1</view>
        <view class="flex-item bc_red">2</view>
        <view class="flex-item bc_blue">3</view>
    </view>
</view>

<view class="section">
    <view><text>flex-direction:row \n justify-content:space-between</text></view>
    <view class="flex-wrp" style="flex-direction:row;justify-content: space-between;">
        <view class="flex-item bc_green">1</view>
        <view class="flex-item bc_red">2</view>
        <view class="flex-item bc_blue">3</view>
    </view>
</view>

<view class="section">
    <view><text>flex-direction:row \n justify-content:space-around</text></view>
    <view class="flex-wrp" style="flex-direction:row;justify-content: space-around;">
        <view class="flex-item bc_green">1</view>
        <view class="flex-item bc_red">2</view>
        <view class="flex-item bc_blue">3</view>
    </view>
</view>

<view class="section">
    <view><text>flex-direction:row \n justify-content:center \n align-items:flex-end</text></view>
    <view class="flex-wrp" style="flex-direction:row;justify-content: center;align-items: flex-end; height: 200px;border:1px solid #cccccc;">
        <view class="flex-item bc_green">1</view>
        <view class="flex-item bc_red">2</view>
        <view class="flex-item bc_blue">3</view>
    </view>
</view>

<view class="section">
    <view><text>flex-direction:row \n justify-content:center \n align-items:center</text></view>
    <view class="flex-wrp" style="flex-direction:row;justify-content: center;align-items: center; height: 200px;border:1px solid #cccccc;">
        <view class="flex-item bc_green">1</view>
        <view class="flex-item bc_red">2</view>
        <view class="flex-item bc_blue">3</view>
    </view>
</view>

<view class="section">
    <view><text>flex-direction:row \n justify-content:center \n align-items:flex-start</text></view>
    <view class="flex-wrp" style="flex-direction:row;justify-content: center;align-items: flex-start; height: 200px;border:1px solid #cccccc;">
        <view class="flex-item bc_green">1</view>
        <view class="flex-item bc_red">2</view>
        <view class="flex-item bc_blue">3</view>
    </view>
</view>