微信小程序--textarea显示文字至于最顶层, 但是覆盖其他view, 显示未超出

本文探讨了在设定textarea自适应高度时遇到的文字超出屏幕并覆盖其他view的问题。通过引入cover-view元素,解决了文字覆盖问题,并详细讨论了cover-view的使用技巧及限制。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

案例

问题是这样的, 我们想将textarea的高度设定自适应, so, 使用到了auto-height属性, 但是, 这个时候出现了问题, 因为我们最大输入量是1000字, 很容易超出屏幕大小的区域, 这时候textarea显示的内容会覆盖在其他的view之上.

问题:

textarea的view 显示区域正常, 只有文字覆盖在最上层, 如下图
在这里插入图片描述
这个是textarea的问题, 那么 如何解决呢

解决

这时候就需要cover-view替代那些本身需要覆盖在上面的view, 来解决这个问题.

注意

这里需要注意的几点, 是有关css的样式的问题

  1. 原来view的文字居中, cover-view无效, 此时, 需要cover-view的嵌套大发, 就是文字放到cover-view上, 由父级的cover-view子cover-view居中即可.
  2. cover-view的存在绝对位置的情况下, 也就是position: absolute;, 此时父级的居中无效
  3. cover-view是覆盖在原生标签上的, 还是跳不出导航栏和底边栏.
  4. 看需求吧, 我是感觉cover-view的性能和延展都比较低, 能不用不用, 一旦使用, 需要协调好层级和显示.
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值