微信小程序全栈开发实践第二章微信小程序组件介绍及使用 -- 2.4 view组件及其重要属性，flex布局中常用的样式及样式值苹果手机多长「微信小程序全栈开发实践第二章微信小程序组件介绍及使用

分享好友最新动态首页最新动态分类切换频道

2025-02-20 08:45

view最主要的功能是布局

1.1 相关属性

属性1：hover-class 指定按下去的样式类

这个属性指定按下去的类样式，让容器有一个单击效果，
当hover-class="none"时，或者没有设置这个属性时，就没有单击态的效果。
单击、再松开手指之后，容器组件恢复之前的状态。

在这里插入图片描述

hover-class 这个属性名称有一定的迷惑性，
在HTML开发中，mousehover事件指的是鼠标悬停事件，hover有悬停的意思，mousedown才是鼠标按下去的事件。

属性2：hover-stop-propagation 组织父节点出现单击态，
默认为false，不阻止
在这里插入图片描述

hover-stop-propagation="{{false}}"
单击子组件的时候，父组件同时也有了一个样式的改变。

hover-stop-propagation
子容器有单击态，父容器没有，
虽然父容器也设置了hover-class属性，
但触碰事件被子容器给阻止了。

事件三阶段

我们通过跟踪父子组件的tap事件，验证一下hover-stop-propagation属性的作用。

在示例中我们给两个view，一对父子容器同时绑定tap事件，
为方便追踪，为父子容器都分配了id，父容器id是parentView，子容器是childView。

单击一次父容器，输出一次。
单击一次子容器却输出两次。

为什么会触发两次的tap事件？
这是因为每个事件它都有捕捉、目标与冒泡三个阶段，
在view视图容器上使用bind绑定的事件，
默认会在目标与冒泡这两个阶段派发事件，
子组件的冒泡事件默认会向上传递。

在这里插入图片描述
hover-stop-propagation这个属性
就是为了阻止父组件出现hover-class样式，
但是它还不能阻止冒泡事件向上传递、
当我们设置这个属性以后，
我们单击子组件，仍然可以看到两次输出。

在这里插入图片描述

那么我们可以？
答案是肯定的，可以使用catch绑定事件函数，

catch与bind的作用相同，
与bind不同的是：
catch会阻止事件向上冒泡。
catch是在事件的捕捉阶段监听事件的。

将，
这样单击子容器组件的时候便不会输出两次了。

在这里插入图片描述

属性3 ：hover-start-time 按住后多久出现单击态默认为50毫秒
设置hover-start-time这个属性，是为了方便开发者控制hover-class样式出现的时机。

属性4 ：hover-stay-time 手指松开以后，单击态保留多长时间，单位均是毫秒

这两个属性的设置，说明在view容器组件内部，有代码肯定做了定时，
当touchstart事件发生时，开始计时，达到hover-start-time时，应用hover-class样式，
当touchstart事件结束，即touchend事件发生时，开始hover-stay-time的倒计时，时间到则移除hover-class样式。