text
text 本质就是span标签，多个text会显示在同一行内。
代码：
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
| <view>
<view>
<text>唱歌画画跳舞</text>
</view>
<view>
<text selectable>唱歌画画跳舞</text>
</view>
<view>
<text space="emsp">唱歌 画画跳舞</text>
</view>
<view>
<text space="ensp">唱歌 画画跳舞</text>
</view>
<view>
<text space="nbsp" style="font-size: 100px;">唱歌 画画跳舞</text>
</view>
</view>
|
其中selectable 代表文本可选中
space代表空格的大小
emsp代表一个中文字符的空格大小
ensp代表半个中文字符的空格大小
nbsp根据字体设置空格大小
decode的功能暂时未知
view
view用来代替div的功能，template节点必须有且只有一个view作为根节点。
示例代码：
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
| <template>
<view class="box2" hover-class="box2-active">
<view class="box1" hover-class="box1-active" hover-stop-propagation
hover-strat-time="2000"
hover-stay-time="2000">我是一个大盒子</view>
</view>
</template>
<style>
.box1 {
width: 100px;
height: 100px;
background-color: red;
}
.box1-active {
background-color: blue;
}
.box2 {
width: 200px;
height: 200px;
background-color: yellow;
}
.box2-active {
background-color: green;
}
</style>
|
hover-class用于指定鼠标点击后的样式
hover-stop-propagation用于阻止冒泡
hover-start-time会让点击事件延缓一段时间触发
hover-stay-time可以让变化后的样式再保持一段时间
示例代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| <template>
<view>
<button>按钮</button>
<button size="mini">按钮</button>
<button type="primary">按钮</button>
<button type="primary" disabled>按钮</button>
<button type="primary" plain>按钮</button>
<button loading></button>
</view>
</template>
|
image
示例代码：
1
2
3
4
5
6
7
| <image src="https://destiny001.gitee.io/image/cxk.gif" />
<image src="https://destiny001.gitee.io/image/cxk.gif"
mode="aspectFit" />
<image src="https://destiny001.gitee.io/image/cxk.gif"
mode="aspectFill" />
|
aspectFit显示长边
aspectFill显示短边
参考：
09-text组件的基本使用
10-view组件的基本使用
11-button按钮组件的使用
12-image组件的基本使用