卡片开发使用伪类之踩坑记录

现象描述：

开发卡片，对某个组件使用伪类，生成点击变色效果，但是松开手指后产生的变色效果回不去了。

例如原背景色效果：

添加伪类后点击效果：

正常情况手机点击时产生变色效果，手指松开后变为原来的颜色，实际情况是手指松开后并没有恢复原来的颜色。

此问题是快应用引擎在支持卡片伪类不全导致的，但是方法总比问题多，稍微修改一下代码就可解决。

解决方案：

在使用伪类的组件上加个点击事件即可，点击事件中不需做任何逻辑处理示例。

代码如下：

<div class="sitetype_box" widgetid="8e4bf1ca-f716-46f8-8614-16d1b35002c5" onclick="test">
 </div>

css样式：

.sitetype_box {
        flex-direction: column;
        background-color:#FFBF00;
        padding: dpConvert(0) dpConvert($elementsMarginHorizontalL) dpConvert(0) dpConvert($elementsMarginHorizontalL);
}

     /**伪类 */
    .sitetype_box :active{
        background-color: #E40078;
    }

方法：

扫描二维码关注公众号，回复： 12483009 查看本文章

test(){
         console.log("message");
      }

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

快应用卡片开发指导：

https://developer.huawei.com/consumer/cn/doc/development/quickApp-Guides/quickapp-develop-card

快应用伪类：

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

---

原文链接：https://developer.huawei.com/consumer/cn/forum/topic/0201404996846120238?fid=18

原作者：Mayism