Uniapp——6. 标签＜view＞【 hover-class，hover-start-time，hover-stay-time，disable-scroll】

一、< view> 标签

📌 简介：
< view> 是页面结构中的基础容器标签，类似于 HTML 中的 div，用于布局和包裹其他组件。
在这里插入图片描述

🔍 示例1：点击效果（hover-class）

<template>
	<view class="box" hover-class="box-hover">点击我</view>
</template>

<style>
.box {
	width: 200px;
	height: 100px;
	background-color: lightblue;
	text-align: center;
	line-height: 100px;
	font-size: 16px;
}
.box-hover {
	background-color: red;
}
</style>

✅ 效果：当用户按住这个 view 时，背景变成红色。
使用场景：

1. 按钮点击反馈
2. 列表项点击反馈

🔍 示例2：点击态延迟生效（hover-start-time）

<template>
	<view 
		class="box" 
		hover-class="box-hover" 
		:hover-start-time="500">
	
		延迟生效点击态
	</view>
</template>

<style>
.box {
	width: 200px;
	height: 100px;
	background-color: lightblue;
	text-align: center;
	line-height: 100px;
	font-size: 16px;
}
.box-hover {
	background-color: red;
}
</style>

✅ 效果：必须按住 500ms 后才出现点击态。

使用场景：

1. 防止误触
2. 自定义长按功能前的过渡提示

🔍 示例3：点击后动画停留更久（hover-stay-time）

<template>
	<view 
		class="box" 
		hover-class="box-hover" 
		:hover-stay-time="1500"
	>
		点击后动画持续1.5秒
	</view>
</template>
.box {
	width: 200px;
	height: 100px;
	background-color: lightblue;
	text-align: center;
	line-height: 100px;
	font-size: 16px;
}
.box-hover {
	background-color: red;
}

✅ 效果：松手后点击态仍保持 1.5 秒。

使用场景：

1. 动画反馈需要更长时间展示
2. 用户体验优化

🔍 示例4：防止滚动冒泡（disable-scroll）

<template>
	<view style="height: 200px; overflow: scroll;" disable-scroll>
		<view v-for="i in 20" :key="i">内容{{ i }}</view>
	</view>
</template>

✅ 效果：在这个区域滚动不会影响页面整体滚动。

使用场景：
1. 弹出层中包含滚动内容
2. 阻止内部滚动影响页面主滚动

二、实战小项目建议

你可以尝试做一个带样式的按钮组件：

<template>
	<view 
		class="btn" 
		hover-class="btn-hover" 
		:hover-stay-time="800"
		@click="onClick"
	>
		提交
	</view>
</template>

<script>
export default {
	methods: {
		onClick() {
			alert('按钮被点击');
		}
	}
}
</script>

<style>
.btn {
	width: 90%;
	margin: 20px auto;
	padding: 20px;
	background-color: #07c160;
	color: white;
	text-align: center;
	border-radius: 10px;
}
.btn-hover {
	background-color: black;
}
</style>