由微信小程序原生组件层级引发的“血案”

前言

今天就来谈谈微信小程序原生组件层级导致的问题。 官方是这样说的:“原生组件的层级是最高的,所以页面中的其他组件无论设置 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组件模拟的,因此很多情况并不能很好的还原真机的表现,建议开发者在使用到原生组件时尽量在真机上进行调试。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏大数据文摘

哈佛大学“钢铁侠”短裤登上Science封面:让你跑得更快,还能助力复健

当说起“机器人外骨骼”,大多数人想到的是像外星人那样的力量装载器,或者是钢铁侠那一身装备。

6920
来自专栏程序员的知识天地

聊Python小白如何系统自学成为Python大牛(上)

很多人在自学Python的时候,总是不知道如何学习,不知道该怎么学,今天看到框架,就想学flask或者其他框架,但是当学的时候又茫然了,不知道怎么学;想学Pyt...

13820
来自专栏linux、Python学习

纯干货!Linux 下各文件夹的结构说明及用途介绍

/home:用户主目录的基点,比如用户user的主目录就是/home/user,可以用~user表示。

14400
来自专栏算法之名

配合OAuth2进行单设备登录拦截 顶

原理就在于要在登录时在redis中存储Session,进行操作时要进行Session的比对。

20230
来自专栏算法之名

spring cloud ribbon与提供者不在同一台服务器访问失败的问题

最近这两天一直有一个问题很困惑,那就是ribbon跟提供者以及eureka在同一台服务器的时候访问一切正常,而把ribbon放到其他服务器的时候,虽然同样注册进...

8240
来自专栏Java那些事

某团面试题:JVM 堆内存溢出后,其他线程是否可继续工作?

最近网上出现一个美团面试题:“一个线程OOM后,其他线程还能运行吗?”。我看网上出现了很多不靠谱的答案。这道题其实很有难度,涉及的知识点有jvm内存分配、作用域...

7620
来自专栏C语言入门到精通

6.8 内部函数和外部函数

解释:只能被本文件中其他函数所调用,在定义内部函数时,在函数名和函数类型的前面加static,所以内部函数又称静态函数

5510
来自专栏大数据文摘

全球情报,一个大脑:美国军方AI指令系统发展史

在Colorado Springs举办的2019年太空研讨会(Space Symposium)的最后一环节,与会者蜂拥进入一个大宴会厅,聆听一位空军官员和一名美...

11320
来自专栏叉叉敌

微信小程序-margin和padding的区别

为了方便,先看一个图,外面的是margin,是外边距,padding是内边距。

33820
来自专栏雪之梦技术驿站

go 学习笔记之值得特别关注的基础语法有哪些

在上篇文章中,我们动手亲自编写了第一个 Go 语言版本的 Hello World,并且认识了 Go 语言中有意思的变量和不安分的常量.

11130

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励