現象描述：
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