Input组件无点击效果

现象描述：

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;    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;    red;    padding: 10px 20px;    border-radius: 40px; } .button:active{    green; } </ style >

 

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

快应用伪类：

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

 

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