uni-app组件（基础布局容器）

最新推荐文章于 2025-05-11 18:31:17 发布

原创最新推荐文章于 2025-05-11 18:31:17 发布 · 225 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app

1.view

类似于传统的div，用于包裹元素

相对于div多出来的属性：

<template>
	<!-- hover-class 设置鼠标单击时显示的样式-->
	<!-- hover-start-time 按住后多久出现点击态，单位毫秒 -->
	<!-- hover-stay-time 手指松开后点击态保留时间，单位毫秒 -->
	<!-- hover-stop-propagation 指定是否阻止本节点的祖先节点出现点击态，App、H5、支付宝小程序、百度小程序不支持（支付宝小程序、百度小程序文档中都有此属性，实测未支持）-->
	<view class="box2">
       <view class="box" hover-class="box1" hover-start-time="5000" hover-stay-time="1000" hover-stop-propagation="true">
	view布局
       </view>
    </view>
</template>

<script>
</script>

<style lang="scss">
	.box2{
		width: 400px;
		height: 400px;
		background-color: aquamarine;
		.box{
			width: 100px;
			height: 100px;
			background-color: #aaa;
		}
		.box1{
			background-color: pink;
		}
	}
	
</style>

2.text

类似于span

代码演示：

<view>
		<!-- selectable 设置文本是否可选（要长按一会才可以选中） -->
		<!-- space 显示连续空格 (也可以直接输空格代码&nbsp;) 
		参数：emsp中文字符空格一半大小
		     emsp中文字符空格大小
			 nbsp根据字体设置的空格大小-->
		<text selectable space="nbsp">text文&nbsp;&nbsp;&nbsp;&nbsp;本</text>
</view>