关于移动端按钮点击的交互

在做移动端项目的时候,通常按钮的点击事件 IOS 下默认会有灰色遮罩层,虽然网上很多在找这种遮罩层的去除方法,但是个人觉得这个东西还是很人性化的

ios下影响到遮罩层的css属性为

1
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);    //  设置颜色

就是当点击的时候元素按下的区域背景色设置为透明

虽然从样式上看,没有遮罩层看起来舒服,但是,遮罩层显示代表的是用户的一个点击行为事件,当用户点击了(点击事件需要网络请求,这时候在网络较弱的场景下,没有点击之后的反应),也就是没有交互效果,会让用户觉得点击失败而多次点击

但是这个css只支持ios Ipad等移动设备 安卓下并不能实现这种交互效果

需求影响,自己写了一个通用的less方法,兼容ios和安卓的点击效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// @color 参数 默认 rgba(0,0,0,0.3)
.active(@color: rgba(0,0,0,0.3)) {
  -webkit-tap-highlight-color: @color;
  // 伪类
  &:active {
    // 伪元素
    &::before {
      content: '';
      position: absolute;
      left: -0.06rem;
      top: -0.06rem;
      right: -0.06rem;
      bottom: -0.06rem;
      background: @color;
      border-radius: 0.1rem;
    }
  }
}

由于安卓不兼容-webkit-tap-highlight-color,而且ios不兼容:active的点击效果(本人测试没有效果),从而兼容IOS和安卓,两者解决方案合并完成这个less方法

上一篇 : 个人网站2.0版本总结个未来规划下一篇 : 关于cookie