微信小程序:自定义组件z-index干不过原生组件z-index

时间:2019-09-10 10:30:02 来源:湖南品牌网 当前位置:贱笑了www.yabovip17.com亚搏体育 > www.yabovip17.com亚搏体育 > 手机阅读

点击右上方红色按钮关注“web秀”,让你真正秀起来

前言

微信小程序:自定义组件z-index干不过原生组件z-index

今天就来谈谈微信小程序,原生组件层级导致的问题。 官方是这样说的:“原生组件的层级是最高的,所以页面中的其他组件无论设置 z-index 为多少,都无法盖在原生组件上。”

有了这句话,如果我们用到了原生组件,就必须考虑层级问题了。否则很容易被原生组件搞乱层级显示问题。

比如:意见反馈页面,有一个textarea,填写内容后,提交有一个自定义弹框提示(询问框),这时候如果textarea和弹框重叠,就会发现,textarea的内容居然在弹框上面,“血案”就此引发。

微信小程序:自定义组件z-index干不过原生组件z-index

如果你没有看过官方的解析,第一次出现这个问题,心里一定有一句话,不知当讲不当讲…

如何解决微信小程序原生组件层级问题?

针对上面的问题,我们想出了一个解决方案。 当textarea失去焦点时,我们就隐藏textarea,用其他元素来显示已经输入的内容,点击这块区域,又把textarea显示出来,让其可以输入。

具体代码:

{{msg||'请输入内容'}}


微信小程序:自定义组件z-index干不过原生组件z-index

问题延伸

如果一个textarea全屏的,即高度100%,底部有一个浮动提交按钮,这样也会出现上述问题。

微信小程序:自定义组件z-index干不过原生组件z-index

这个问题又怎么解决了?上面的解决方案,在这里已经不管用了。

官方给出了针对textarea的解决方式,使用cover-view和 cover-image替代,这两个组件也是原生组件,可以覆盖textarea组件。




微信小程序:自定义组件z-index干不过原生组件z-index

微信小程序:自定义组件z-index干不过原生组件z-index

微信小程序原生组件有哪些?

camera canvas input(仅在focus时表现为原生组件) live-player live-pusher map textarea video

微信小程序原生组件的使用限制

微信小程序由于原生组件脱离在 WebView 渲染流程外,因此在使用时有以下限制:

1、原生组件的层级是最高的,所以页面中的其他组件无论设置 z-index 为多少,都无法盖在原生组件上。 后插入的原生组件可以覆盖之前的原生组件。

2、原生组件还无法在 中使用。 基础库 2.4.4 以下版本,原生组件不支持在 中使用。

www.yabovip17.com亚搏体育3、部分CSS样式无法应用于原生组件,例如: (1)无法对原生组件设置 CSS 动画 (2)无法定义原生组件为 position: fixed (3)不能在父级节点使用 overflow: hidden 来裁剪原生组件的显示区域

4、原生组件的事件监听不能使用 bind:eventname 的写法,只支持 bindeventname。原生组件也不支持 catch 和 capture 的事件绑定方式。

5、原生组件会遮挡 vConsole 弹出的调试面板。 在工具上,原生组件是用web组件模拟的,因此很多情况并不能很好的还原真机的表现,建议开发者在使用到原生组件时尽量在真机上进行调试。

总结

小程序其实还有很多的坑,希望他们越做越好,让我们搬砖也越来越轻松。你在开发小程序中,遇到过什么奇葩问题了?欢迎留言,大家一起探讨。

公告

喜欢小编的点击关注,了解更多知识!

源码地址,可以点击下方“了解更多”获取!

武侠本月排行

武侠精选