【微信小程序】cover-view中使用button不显示(关于cover-view的冷知识)

废话不多说,先看小程序文档

【微信小程序】cover-view中使用button不显示(关于cover-view的冷知识)_第1张图片

文档上写的清清楚楚可以在cover-view中使用button

但是我在实际使用中却碰到在cover-view中使用button,button不显示的问题!

【微信小程序】cover-view中使用button不显示(关于cover-view的冷知识)_第2张图片

项目中底部的button保存按钮是position-fixed固定在屏幕最下方的,列表中有input框,所以在真机滑动列表的时候,input框中的值会穿透button显示出来,令人懊恼!

后来将底部的view标签替换成cover-view后,发现button不显示了,经过一系列的实验和探讨,发现是因为button设置了背景渐变色的原因。。。

解决办法:将button背景色的渐变色更改为单颜色。

 

cover-view的限制:

1、cover-view不支持背景渐变色,其内部的标签也不能使用渐变色。

      解决办法:背景色换成单一颜色

2、cover-view不支持设置单一位置的border边框,比如想加个border-top上边框线来分割标签

      解决办法:用cover-view将其高设置为1px,模拟出一个border边框线

3、cover-view不能覆盖textarea

      解决办法:textarea在失去焦点的时候将其替换为view标签,点击的时候再换回textarea

 

我在cover-view中走了很多弯路,希望这篇文章能帮到你们,节省你们的时间!

如果帮到你了,能抽空给个赞或者评论的话,万分感谢!~

你可能感兴趣的:(微信小程序)