现象描述：

input组件type为button时，设置了圆角border-radius属性后，点击该组件时没有点击效果了（背景色没有变化），删除该属性就是有点击效果的。

代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<template>
  <div class="page-wrapper">
    <input type="button" class="button"  value="Animation 动画" />
  </div>
</template>
<script>
</script>
  
<style>
.page-wrapper {
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.button {
  color: #20a0ff;
  background-color: red;
  padding: 10px 20px;
  border-radius: 40px;
}
</style>

问题分析：

设置圆角属性后，引擎底层受限导致不能自动实现点击效果，需要自己去实现。

解决方法：

设置了圆角属性后要实现按钮点击效果可以通过快应用的伪类实现。

修改后代码如下（见红色部分）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<template>
  <div class="page-wrapper">
    <input type="button" class="button"  value="Animation 动画" />
  </div>
</template>
<script>
</script>
  
<style>
.page-wrapper {
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.button {
  color: #20a0ff;
  background-color: red;
  padding: 10px 20px;
  border-radius: 40px;
}
.button:active{
  background-color: green;
}
</style>

 

欲了解更多详情，请参见：

快应用伪类：

https://developer.huawei.com/consumer/cn/doc/development/quickApp-References/quickapp-style#h1-1578402140607

原文链接：https://developer.huawei.com/...
原作者：Mayism