view の変更点

• 追加された行はこの色です。
• 削除された行はこの色です。
• ++uniapp++view へ行く。
• ++uniapp++view の差分を削除

#author("2022-12-10T10:47:41+08:00","default:Admin","Admin")
#author("2022-12-10T10:48:20+08:00","default:Admin","Admin")
[[uni-app]]

&color(red){※前提条件：vue3 的uniapp开发};

#contents

* view组件用法 [#da174c6b]

当作div使用，view标签的常用属性：hover-class  ，手指点击后所产生的效果，在uni-app中，不使用:horver

|属性名|类型|默认值|说明|h
|hover-class|String|none|指定按下去的样式类。当 hover-class="none" 时，没有点击态效果|
|hover-stop-propagation|Boolean|false|指定是否阻止本节点的祖先节点出现点击态|
|hover-start-time|Number|50|按住后多久出现点击态，单位毫秒|
|hover-stay-time|Number|400|手指松开后点击态保留时间，单位毫秒|


** 例程1 [#x75dfc95]

#codeprettify{{
<template>
	<view class="max" hover-class="box2-active">
		<view class="box" hover-class="box-active" hover-stop-propagation :hover-start-time="2000"
			:hover-stay-time="2000">我是一个大盒子哦</view>
	</view>
</template>

<style>
	.max {
		width: 200rpx;
		height: 200rpx;
		background-color: blue;
	}

	.box {
		width: 100rpx;
		height: 100rpx;
		background-color: #F0AD4E;
	}

	.box-active {
		background-color: #007AFF;
	}

	.box2-active {
		background-color: pink;
	}
</style>
}}

*** hover-stop-propagationy [#f9195fdf]

属性意思是阻止冒泡	点大盒子的时候小盒子不会变	反之亦然

*** hover-class="box-active" [#g1972b24]

指定按下去的样式类

也就是点击设置会变颜色

*** hover-start-time [#je5d1d22]

按住后多久出现点击态，单位毫秒

*** hover-stay-time [#kaabfc83]
手指松开后点击态保留时间，单位毫秒

** 例程2 [#ib62476b]

例子：animate.css和horver-class一起使用

#codeprettify{{
<!-- horver-class是手指点击该元素所产生的效果 bounceIn才是最终效果，所以bounceIn写在horver-class里，而animated则写在class里-->
<view class="box animated" hover-class="bounceIn"></view>
}}


#hr();
Comment：
#comment_kcaptcha