最近在解决小程序PC版的兼容性问题,其中有个极为拉跨的问题,登录页面的按钮颜色没了!!
具体问题看图
正确图片
问题详情
这个问题在移动端和调试工具上是没问题的,那可就神奇了,下面看下原版代码
<button class="login-button" disabled="{{!loginable}}"
style="background:{{loginable?'#0B7BFBFF':'#D8D8D8'}};color:white"
bindtap="{{loginModel==0?'loginByAccount':'loginByMobie'}}">登录</button>
这里按设计师要求,弄了个用户输入数据后才显示按钮,因此弄了一个 loginable 属性控制按钮的点击与否,还有显示的颜色。这里我就怀疑两个地方了,一个是 disabled 属性,不确定这个是否有问题,另一个就是 ‘#0B7BFBFF’ 这个颜色,而且灰色 ‘#D8D8D8’ 是可以正常显示了,那它最为可疑,下面就把代码改成如下,把蓝色 ‘#0B7BFBFF’ 末尾的 FF 去掉:
<button class="login-button" disabled="{{!loginable}}"
style="background:{{loginable?'#0B7BFB':'#D8D8D8'}};color:white"
bindtap="{{loginModel==0?'loginByAccount':'loginByMobie'}}">登录</button>
汗,结果就可以了。。。
结语
设计师使用蓝湖总喜欢搞点带透明的的颜色,像 ‘#0B7BFBFF’ 这种带 FF 的,一般情况下使用不会出问题,但是实际透明度并没有显示出来,还是乖乖使用 css 的透明度属性吧!
opacity: value ;
end