小程序悬停类点击状态效果的实现

微信小程序设置悬停类，实现点击状态效果

增强小程序的触感，提高用户交互的感知能力

概念和注意事项

在微信小程序中，悬停类属性可以用来指定元素的点击效果。但是，应该注意的是，大多数组件在使用中不支持该属性。

目前，有三个组件支持悬停类属性：视图、按钮和导航器。不支持具有悬停类属性的组件，也不支持悬停停止传播、悬停开始时间和悬停停留时间等三种属性。当hover-class的值为none时，组件上不会有点击效果。

需要注意的事项

悬停类样式显示的原理是在单击时将样式添加到类的样式中。如果发生冲突，无论是谁在后面都会被显示出来！当组件中没有指定的类时，直接使用hover-class将起到相应的作用。但是，当组件中指定了可能与hover-class冲突的其他类时，hover-class无效。由hover-class指定的类将被放在相应的wss文件的末尾，这样它就不会被其他类覆盖。当视图组件包含不支持悬停类的组件(如图像)但需要在组件上使用悬停停止传播属性时，有必要用视图、按钮或导航器包装不支持悬停类的组件以使用场景

1.列表页面——详细信息页面(点击跳转)

以新闻资讯为例，大部分应该是这样的

添加以下代码

//html view hover-class=' wsui-BTN _ _ hover _ list './view//CSS . wsui-BTN _ _ hover _ list { opa city 3360 0.9；background : # f7f 7；}点击效果如下

2.显示类表列表(不触发跳转)

您可以设置悬停停留时间属性来突出显示触摸的行或列

//html view hover-class=' wsui-BTN _ _ hover _ list ' hover-stay-time=' 3000 './view//CSS . wsui-BTN _ _ hover _ list { opa city 3360 0.9；background : # f7f 7；}

3.提交课程按钮

一种风格往往不被满足。对于各种形状的按钮，暂时提供以下两个参考。wsui-btn__hover_btn {//圆形按钮opacity: 0.9transform:标度(0.95，0.95)；//长矩形按钮位置：相对；top: 3rpxleft: 3rpxbox-shadow:0px 0px 8px rgba(0，0，0， 1)插图；}

上图中，以长矩形按钮为例，使用scale的整体缩放效果明显不好

圆形按钮显然更适合。对于在同一页面上等待请求返回的按钮，使用带有禁用属性的加载按钮更合理

4.要考虑的场景

选择类按钮，特别是点击切换一些状态，会有及时的状态切换响应，比如蒙版图层、活动类导航图标类、首页图标导航。我认为没有必要在上面增加悬停类

特别是，以上只是介绍。对于点击状态和用户体验优化的例子，欢迎大家从效果、使用场景、统一性等方面对评论和评论进行优化和补充。希望对你的学习有帮助，多支持我们。