微信小程序中视图容器类组件view的使用详解

 时间:2024-10-12 16:48:57

1、首先通过百度搜索官方文档,查看 view 组件可用的一些属性,下面各步骤就演示 view 组件中 hover-class,hover-stop-propagation,hover-start-time,hover-stay-time 的使用详解。

微信小程序中视图容器类组件view的使用详解

2、在 wxml 文件中定义两个嵌套的 view 组件,被配置父容器组件的 class 和 hover-class 属性,以及子容器组件的 class, hover-class, hover-start-time 和 hover-stay-time 属性。

微信小程序中视图容器类组件view的使用详解

3、在 wxss 中分别定义上述组件 class 属性和 hover-class 属性指定的类的样式。

微信小程序中视图容器类组件view的使用详解

4、保存编译后,在模拟器中查看组件的显示效果。

微信小程序中视图容器类组件view的使用详解

5、长按子组件,可以看出子组件背景色发生预期变化(即子组件 hover-class 样式),父组件的背景色也发生变化(即父组件 hover-class 定义的样式)。

微信小程序中视图容器类组件view的使用详解

6、子盲褓梆尺组件添加 hover-stop-propagation = "true" 的属性后,诺蝈胂叟保存编译后,再次长按子组件,这时只有子组件显示了其 hover-class 中定义的样式,父组件没有变化,这个属性阻止了子组件上 hover 事件向上的冒泡机制。

微信小程序中视图容器类组件view的使用详解
  • 原神投喂雪狐方法
  • 西风吹拂的日常完成方法详解
  • 重新安装Visual Studio时发现无法修改安装路径
  • 原神第四个封印镇石转动方法
  • 原神参量质变仪怎么获得
  • 热门搜索
    运动木地板翻新 手足口病什么症状 酒萸肉的功效与作用 交契税需要什么资料 什么化作春泥更护花 阿胶糕的功效与作用及食用方法 兔子的尾巴有什么作用 什么是出口退税 boyfriend什么意思 内疚什么意思