view和text常用视图容器组件

view

视图容器
官方文档：https://uniapp.dcloud.net.cn/component/view.html
属性：
hover-class:当用户点击这些元素上时，这个类会触发一些视觉效果的变化。
hover-stay-time:手指松开后原有的效果保留时间，单位毫秒
pages/index/index.vue代码：

<template>
	<view class="box" hover-class="boxHover" hover-stay-time="0">
		view布局标签
	</view>
</template>

<script setup>
	
</script>

<style lang="scss">
	.box{
		width: 200px;
		height: 200px;
		background: #ccc;
	}
	.boxHover{
		background: orange;
		width: 300px;
	}
</style>

没有点击时的效果：

点击后的效果：
hover-stop-propagation:当为true时，阻止事件冒泡，点击子元素，父元素不会发生效果改变，App、H5、支付宝小程序、百度小程序不支持
没加hover-stop-propagation属性时，pages/index/index.vue的代码：

<template>
	<view class="box" hover-class="boxHover">
		<view class="inner" hover-class="innerHover">内部元素</view>
	</view>
</template>

<script setup>
	
</script>

<style lang="scss">
	.box{
		width: 200px;
		height: 200px;
		background: #ccc;
	}
	.boxHover{
		background: orange;
		width: 300px;
	}
	.inner{
		width: 150px;
		height: 150px;
		background: green;
	}
	.innerHover{
		background: greenyellow;
	}
</style>

没点击的运行效果：

点击内部元素后的运行效果：

添加hover-stop-propagation属性时，pages/index/index.vue的代码：

<template>
	<view class="box" hover-class="boxHover">
		<view class="inner" hover-class="innerHover" hover-stop-propagation>内部元素</view>
	</view>
</template>

<script setup>
	
</script>

<style lang="scss">
	.box{
		width: 200px;
		height: 200px;
		background: #ccc;
	}
	.boxHover{
		background: orange;
		width: 300px;
	}
	.inner{
		width: 150px;
		height: 150px;
		background: green;
	}
	.innerHover{
		background: greenyellow;
	}
</style>

没点击的运行效果：

点击内部元素后的运行效果：

text组件

文本组件。用于包裹文本内容。
官方文档：https://uniapp.dcloud.net.cn/component/text.html
属性：
selectable：当为true时，文本可以选中
pages/index/index.vue的代码：

<template>
	<text selectable>文本标签</text>
</template>

<script setup>
	
</script>

<style lang="scss">
	
</style>

运行效果：

space:显示连续空格
pages/index/index.vue的代码：

<template>
	<text space="emsp">文本   标签</text>
</template>

<script setup>
	
</script>

<style lang="scss">
	
</style>

运行效果：