uniapp 10--view组件的基本使用

时间:2024-05-19 18:49:35

view组件的基本使用

uniapp 10--view组件的基本使用
uniapp 10--view组件的基本使用

uniapp 10--view组件的基本使用

hover-class :按下去的样式

uniapp 10--view组件的基本使用
uniapp 10--view组件的基本使用
代码:
uniapp 10--view组件的基本使用
结果:
uniapp 10--view组件的基本使用
uniapp 10--view组件的基本使用
点击之后:由绿色变为红色
uniapp 10--view组件的基本使用

hover-stop-propagation:阻止冒泡状态

uniapp 10--view组件的基本使用
uniapp 10--view组件的基本使用

uniapp 10--view组件的基本使用
uniapp 10--view组件的基本使用
uniapp 10--view组件的基本使用
点击小的绿色的会使小的变成红色,大的变成粉红色。
但是点击大的只有大的编程粉红色
因为大的是父级,小的是子级,子级变父级变,父级变子级没有资格变

uniapp 10--view组件的基本使用
所以用hover-stop-propagation来阻止冒泡行为:
uniapp 10--view组件的基本使用
结果就是:点击绿色的只有绿色的变成红色
点击蓝色的只有蓝色的变成粉红色(独自美丽,无不干扰)

uniapp 10--view组件的基本使用
uniapp 10--view组件的基本使用

hover-start-time“按住之后延迟多少出现点击后状态

uniapp 10--view组件的基本使用
uniapp 10--view组件的基本使用
点击之后2s出现效果(绿色变成红色)
uniapp 10--view组件的基本使用

hover-stay-time:点击之后,点击后状态保持的时间

uniapp 10--view组件的基本使用

uniapp 10--view组件的基本使用
2s之后才会消失(由红色变回绿色)
uniapp 10--view组件的基本使用