微信小程序：点击navigator标签有阴影

点击图片，发现右侧和下侧有阴影，效果如下：

错误代码：

<navigator url="/pages/overview/overview?title=荆州介绍" open-type="navigate"
            >
                <image src="/image/xiaogan-overview.png" mode="scaleToFill"></image>
            </navigator>

解决办法：添加 hover-class="none" 属性 

<navigator url="/pages/overview/overview?title=荆州介绍" open-type="navigate" hover-class="none"
            >
                <image src="/image/xiaogan-overview.png" mode="scaleToFill"></image>
            </navigator>

如果不想麻烦一个个标签加，可以全局 css 去掉

/* 方法一：
    background-color:none 依旧会有阴影效果。不修改opacity属性会有 0.7的透明效果 
    因为系统属性写法为： 
    .navigator-hover {
        background-color: rgba(0, 0, 0, .1);
        opacity: .7;
    }
*/
.navigator-hover {
    background-color: transparent !important;
    opacity: 1;
}
 
/* 
   方法二：如果层级不够/覆盖不了，可以再添加一层 navigator
*/
navigator.navigator-hover {
    background-color: transparent !important;
    opacity: 1;
}

 

---

感谢您的阅读，如果您觉得阅读本文对您有帮助，请点一下“推荐”按钮。本文欢迎各位转载，但是转载文章之后必须在文章页面中给出作者和原文连接。