小程序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 相关文章推荐
22点关于jquery性能优化的建议
May 28 Javascript
2014年最火的Node.JS后端框架推荐
Oct 27 Javascript
在JavaScript中处理数组之reverse()方法的使用
Jun 09 Javascript
详解JavaScript中数组的相关知识
Jul 29 Javascript
JavaScript 正则表达式中global模式的特性
Feb 25 Javascript
php基于redis处理session的方法
Mar 14 Javascript
详述JavaScript实现继承的几种方式(推荐)
Mar 22 Javascript
JavaScript位移运算符(无符号) &gt;&gt;&gt; 三个大于号 的使用方法详解
Mar 31 Javascript
bootstrap flask登录页面编写实例
Nov 01 Javascript
JavaScript数组push方法使用注意事项
Oct 30 Javascript
在vscode中统一vue编码风格的方法
Feb 22 Javascript
file-loader打包图片文件时路径错误输出为[object-module]的解决方法
Jan 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
ThinkPHP调用common/common.php函数提示错误function undefined的解决方法
2014/08/25 PHP
javascript之大字符串的连接的StringBuffer 类
2007/05/08 Javascript
北京奥运官方网站幻灯切换效果flash版打包下载
2008/01/30 Javascript
JavaScript实现算术平方根算法-代码超简单
2015/09/11 Javascript
jQuery移动web开发之页面跳转和加载外部页面的实现
2015/12/04 Javascript
原生JavaScript实现AJAX、JSONP
2017/02/07 Javascript
微信小程序 开发经验整理
2017/02/15 Javascript
JavaScript实现三级联动效果
2017/07/15 Javascript
使用vue + less 实现简单换肤功能的示例
2018/02/21 Javascript
基于vue循环列表时点击跳转页面的方法
2018/08/31 Javascript
小程序云开发如何实现图片上传及发表文字
2019/05/17 Javascript
[02:37]2018DOTA2亚洲邀请赛赛前采访-EG篇
2018/04/03 DOTA
python实现百度关键词排名查询
2014/03/30 Python
python控制台中实现进度条功能
2015/11/10 Python
Windows下Python使用Pandas模块操作Excel文件的教程
2016/05/31 Python
python字典多键值及重复键值的使用方法(详解)
2016/10/31 Python
python简单验证码识别的实现方法
2019/05/10 Python
tensorflow模型保存、加载之变量重命名实例
2020/01/21 Python
如何在Windows中安装多个python解释器
2020/06/16 Python
python二维图制作的实例代码
2020/12/03 Python
html5+css3气泡组件的实现
2014/11/21 HTML / CSS
基于Canvas+Vue的弹幕组件的实现
2019/07/23 HTML / CSS
html5 拖拽上传图片实例演示
2013/04/01 HTML / CSS
NEW LOOK官网:英国时装零售巨头之一,快时尚品牌
2017/01/11 全球购物
Kidsroom台湾:来自德国的婴儿用品
2017/12/11 全球购物
印尼值得信赖的在线交易网站:Bukalapak
2019/03/11 全球购物
卡骆驰德国官方网站:Crocs德国
2019/03/29 全球购物
中学生演讲稿
2014/04/26 职场文书
生产助理岗位职责
2014/06/18 职场文书
家长会标语
2014/06/24 职场文书
解放思想演讲稿
2014/09/11 职场文书
学习保证书100字
2015/02/26 职场文书
2015年安全教育月活动总结
2015/03/26 职场文书
用人单位聘用意向书
2015/05/11 职场文书
oracle删除超过N天数据脚本的方法
2022/02/28 Oracle
TV动画《间谍过家家》公开PV
2022/03/20 日漫