uni-app组件_基础组件

组件是视图层的基本组成单元

view

视图容器

它类似于传统html中的div，用于包裹各种元素内容

<view class="container">
    <view class="box1"></view>
    <view class="box2"></view>
    <view class="box3"></view>
</view>

xxxxxxxxxx
.container{
    height: 100px;
    display: flex;
}
.container view{
    flex:1;
    height: 100px;
}
.container .box1{
    background-color: red;
}
.container .box2{
    background-color: green;
}
.container .box3{
    background-color: blue;
}

text

文本组件

用于包裹文本内容

xxxxxxxxxx
<view class="box1">
    <text>盒子1</text>
</view>

xxxxxxxxxx
.container view{
    flex:1;
    height: 100px;
    text-align: center;
}

Tip

<text> 组件内只支持嵌套 <text>，不支持其它组件或自定义组件，否则会引发在不同平台的渲染差异

如果使用 <span> 组件编译时会被转换为 <text>

除了文本节点以外的其他节点都无法长按选中

icon

图标

xxxxxxxxxx
<view>
    <icon color="green" type="success" size="26"/>
</view>

属性说明

type 有效值

xxxxxxxxxx
success, success_no_circle, info, warn, waiting, cancel, download, search, clear

Tip

由于 icon 组件各端表现存在差异，可以通过使用 字体图标 的方式来弥补各端差异

实时效果反馈

1. uni-app中，下列那个组件适合承载文本信息：

A view

B text

C span

D icon

答案

1=>B