uni-app中view和text组件和动画的使用

参考官方文档：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第&nbsp;二&nbsp;行</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>