参考官方文档:https://uniapp.dcloud.io/component/view
view
视图容器。
它类似于传统html中的div,用于包裹各种元素内容。
如果使用nvue,则需注意,包裹文字应该使用组件。
属性说明
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
hover-class | String | none | 指定按下去的样式类。当 hover-class=“none” 时,没有点击态效果 |
hover-stop-propagation | Boolean | false | 指定是否阻止本节点的祖先节点出现点击态 |
hover-start-time | Number | 50 | 按住后多久出现点击态,单位毫秒 |
hover-stay-time | Number | 400 | 手指松开后点击态保留时间,单位毫秒 |
如果使用 <div>
,编译时会被转换为 <view>
text
文本组件。
用于包裹文本内容。
属性说明
属性名 | 类型 | 默认值 | 说明 | 平台差异说明 |
---|---|---|---|---|
selectable | Boolean | false | 文本是否可选 | |
space | String | 显示连续空格 | App、H5、微信小程序 | |
decode | Boolean | false | 是否解码 App、H5、微信小程序 |
space 值说明
值 | 说明 |
---|---|
ensp | 中文字符空格一半大小 |
emsp | 中文字符空格大小 |
nbsp | 根据字体设置的空格大小 |
注意
<text>
组件内只支持嵌套<text>
,不支持其它组件或自定义组件,否则会引发在不同平台的渲染差异。- 在app-nvue下,只有
<text>
才能包裹文本内容。无法在<view>
组件包裹文本。 - decode 可以解析的有
< > & '    
。 各个操作系统的空格标准并不一致。 - 除了文本节点以外的其他节点都无法长按选中。
- 支持
\n
方式换行。 - 如果使用
<span>
组件编译时会被转换为<text>
。
代码示例:
<template>
<view>
<view class="view-box animated" hover-stay-time="1000" hover-class="view-box-hover rubberBand">view组件演示</view>
<text :selectable="true">text组件\n第 二 行</text>
</view>
</template>
<script>
export default {
data() {
return {
//title: 'Hello'
}
},
onLoad() {
},
methods: {
}
}
</script>
<style>
.view-box{
width: 200upx;
height:200upx;
background:#09BB07;
color: #FFFFFF;
margin: 100upx;
}
.view-box-hover{
background: red;
}
</style>