小程序hover-class点击态效果实现


Posted in Javascript onFebruary 26, 2019

微信小程序设置 hover-class,实现点击态效果

增强小程序触感,提高用户交互感知度

概念及注意事项

微信小程序中,可以用 hover-class 属性来指定元素的点击态效果。但是在在使用中要注意,大部分组件是不支持该属性的。

  • 目前支持 hover-class 属性的组件有三个:view、button、navigator。
  • 不支持 hover-class 属性的组件,同时也不支持 hover-stop-propagation、hover-start-time、hover-stay-time 这三个属性。
  • 当 hover-class 的值为 none 时,组件上不会有任何点击态效果。

小程序hover-class点击态效果实现

注意事项

  • hover-class样式显示的原理是 点击时把样式加到class的样式中,冲突时,谁在后面就显示谁!
  • 当组件中没有任何指定的类时,直接使用 hover-class 就会起到相应的作用,但是当组件中已经指定了其他可能与 hover-class 冲突的类时,hover-class 无效
  • 将 hover-class 指定的类放在对应 wss 文件的最末尾,这样就不会被其他类所覆盖
  • 通常,当一个 view 组件中包含 image 等不支持 hover-class 的组件,但又需要在该组件上使用 hover-stop-propagation 属性的作用时,需要将不支持 hover-class 的组件用view、button 或 navigator 包裹起来

使用场景

1.列表页——详情页(点击跳转)

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

小程序hover-class点击态效果实现

添加如下代码

//html
<view hover-class='wsui-btn__hover_list'>
  ...
</view>
//css
.wsui-btn__hover_list {
  opacity: 0.9;
  background: #f7f7f7;
}

点击效果如下图

小程序hover-class点击态效果实现

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

可设置hover-stay-time属性,突出显示触摸行或列

//html
<view hover-class='wsui-btn__hover_list' hover-stay-time="3000">
  ...
</view>
//css
.wsui-btn__hover_list {
  opacity: 0.9;
  background: #f7f7f7;
}

小程序hover-class点击态效果实现

3.提交类按钮

1种样式往往不能满足,各种形状的按钮,暂提供以下2种参考

.wsui-btn__hover_btn {
//圆形按钮
 opacity: 0.9;
 transform: scale(0.95, 0.95);
//长矩形按钮
 position: relative;
 top: 3rpx;
 left: 3rpx;
 box-shadow:0px 0px 8px rgba(0, 0, 0, .1) inset; 
}

小程序hover-class点击态效果实现

小程序hover-class点击态效果实现

上图以长矩形按钮为例,采用scale整体缩放效果显然不佳

小程序hover-class点击态效果实现

圆形按钮显然更合适对于同页面等待请求返回的按钮,配合 disabled 属性,使用加载中按钮的方案更为合理

4.有待考量的场景

选择类按钮,特指点击切换某些状态,会有及时的状态切换响应的,如遮罩层、active类导航图标类,首页的图标导航我认为以上无需添加hover类

特别说明
以上只是抛砖引玉,针对点击态,用户体验优化的示例
欢迎大家针对效果、使用场景、统一性等方面留言、评论作出优化和补充,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。
Javascript 相关文章推荐
JavaScript 小型打飞机游戏实现原理说明
Oct 28 Javascript
Javascript实现真实字符串剩余字数提示的实例代码
Oct 22 Javascript
原生javaScript做得动态表格(注释写的很清楚)
Dec 29 Javascript
js如何调用qq互联api实现第三方登录
Mar 28 Javascript
js实现Form栏显示全格式时间时钟效果代码
Aug 19 Javascript
ES6学习笔记之Set和Map数据结构详解
Apr 07 Javascript
Vue响应式原理详解
Apr 18 Javascript
js导出Excel表格超出26位英文字符的解决方法ES6
Nov 15 Javascript
详解vue-meta如何让你更优雅的管理头部标签
Jan 18 Javascript
微信小程序实现简易table表格
Jun 19 Javascript
微信小程序位置授权处理方法
Jun 13 Javascript
区分vue-router的hash和history模式
Oct 03 Javascript
JS实现计算小于非负数n的素数的数量算法示例
Feb 26 #Javascript
vue使用Font Awesome的方法步骤
Feb 26 #Javascript
JS实现的杨辉三角【帕斯卡三角形】算法示例
Feb 26 #Javascript
create-react-app使用antd按需加载的样式无效问题的解决
Feb 26 #Javascript
JS实现电话号码的字母组合算法示例
Feb 26 #Javascript
JS实现的合并两个有序链表算法示例
Feb 25 #Javascript
JS实现判断有效的数独算法示例
Feb 25 #Javascript
You might like
Flash空降上海 化身大魔王接受挑战
2020/03/02 星际争霸
发一个php简单的伪原创程序,配合商城采集用的
2010/10/12 PHP
Javascript数组的排序 sort()方法和reverse()方法
2012/06/04 Javascript
JS控件的生命周期介绍
2012/10/22 Javascript
JS实现商品倒计时实现代码
2013/05/03 Javascript
用js提交表单解决一个页面有多个提交按钮的问题
2014/09/01 Javascript
使用javascript获取页面名称
2014/12/23 Javascript
使用VS开发 Node.js指南
2015/01/06 Javascript
js实现C#的StringBuilder效果完整实例
2015/12/22 Javascript
深入剖析JavaScript面向对象编程
2016/07/12 Javascript
学好js,这些js函数概念一定要知道【推荐】
2017/01/19 Javascript
分享Bootstrap简单表格、表单、登录页面
2017/08/04 Javascript
VUE饿了么树形控件添加增删改功能的示例代码
2017/10/17 Javascript
Angular实现点击按钮控制隐藏和显示功能示例
2017/12/29 Javascript
Vue实现渲染数据后控制滚动条位置(推荐)
2019/12/09 Javascript
原理深度解析Vue的响应式更新比React快
2020/04/04 Javascript
vuecli3.x中轻松4步带你使用tinymce的步骤
2020/06/25 Javascript
nuxt静态部署打包相对路径操作
2020/11/06 Javascript
浅谈使用Python变量时要避免的3个错误
2017/10/30 Python
详解python的ORM中Pony用法
2018/02/09 Python
Python入门必须知道的11个知识点
2018/03/21 Python
Django代码性能优化与Pycharm Profile使用详解
2018/08/26 Python
Python自动抢红包教程详解
2019/06/11 Python
int在python中的含义以及用法
2019/06/27 Python
python面向对象 反射原理解析
2019/08/12 Python
Python检查图片是否损坏及图片类型是否正确过程详解
2019/09/30 Python
命令行运行Python脚本时传入参数的三种方式详解
2019/10/11 Python
Python读取pdf表格写入excel的方法
2021/01/22 Python
捷克玩具商店:Bambule
2019/02/23 全球购物
安全教育心得体会
2013/12/29 职场文书
小学毕业感言50字
2014/02/16 职场文书
小学生春游活动方案
2014/08/20 职场文书
大学生个人年度总结范文
2015/02/15 职场文书
项目经理岗位职责范本
2015/04/01 职场文书
2016年11月份红领巾广播稿
2015/12/21 职场文书
css中:last-child不生效的解决方法
2022/08/05 HTML / CSS