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

现象描述：

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

例如原背景色效果：

在这里插入图片描述

添加伪类后点击效果：

在这里插入图片描述

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

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

解决方案：

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

代码如下：

<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;
    }
复制代码

方法：

test(){
         console.log("message");
      }
复制代码

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

快应用卡片开发指导：

developer.huawei.com/consumer/cn…

快应用伪类：

developer.huawei.com/consumer/cn…

本文在开源项目：https://github.com/Android-Alvin/Android-LearningNotes 中已收录，里面包含不同方向的自学编程路线、面试题集合/面经、及系列技术文章等，资源持续更新中...