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

前言

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

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

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

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

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

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

具体代码：

<text class="text" v-if="showText" @click="showTextarea">{{msg||'请输入内容'}}</text>
<textarea 
 v-else
 v-model="msg"
 @blur="confirmText"
 @confirm="confirmText"
 :focus="onfocus"
 placeholder="请输入内容" 
 maxlength="1000"
></textarea>
<script>
export default {
 data () {
 return {
 msg: '',
 onfocus: false,
 showText: true
 }
 },
 methods: {
 showTextarea () {
 this.showText = false
 this.onfocus = true
 },
 confirmText () {
 this.showText = true
 this.onfocus = false
 }
 }
}
</script>

问题延伸

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

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

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

<cover-view class="btn-save">
 <button @click="$refs.dialog.show()">提交</button>
</cover-view>

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

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

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

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

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

2、原生组件还无法在 <picker-view> 中使用。 基础库 2.4.4 以下版本，原生组件不支持在 <scroll-view>、<swiper>、<movable-view> 中使用。

3、部分CSS样式无法应用于原生组件，例如： （1）无法对原生组件设置 CSS 动画 （2）无法定义原生组件为 position: fixed （3）不能在父级节点使用 overflow: hidden 来裁剪原生组件的显示区域

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

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

总结

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

公告

喜欢小编的点击关注，了解更多知识！

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