在开发微信H5的时候,发现在iOS 上<wx-open-launch-app/> 组件点击有灰色半透明效果,有也行,但我的按钮是圆角,这个效果设置圆角一直不生效。
因为只在iOS 真机上出现,十分难调试,官方的开发工具切换为iOS 也没这个效果。另外<wx-open-launch-app/> 上一个自定义组件,也不确定这个效果是否能去掉,花了很多时间。
后来查到iOS 上有一个-webkit-tap-highlight-color 属性,置为透明能去除这个效果。于是看了下自己用的UI 库arco,确实设置了这个属性。<wx-open-launch-app/> 不生效可能是因为CSS 隔离了。
经过多番测试,这段代码终于去掉了这个点击的灰色效果。
*{
-webkit-tap-highlight-color: transparent;
tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-appearance: none;
appearance: none;
}完整代码
<wx-open-launch-app
id='launch-btn'
style="position:absolute;top:0;left:0;right:0;bottom:0;border-radius: 20px;"
extinfo='${extinfo}'
appid="appid"
>
<template>
<style>
.wx-btn{
width:100%;
height: 40px;
border-radius: 20px;
}
*{
-webkit-tap-highlight-color: transparent;
tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-appearance: none;
appearance: none;
}
</style>
<div class="wx-btn"></div>
</template>
</wx-open-launch-app>