cover-view与textarea的显示层级有BUG
发布于 7 年前 作者 guoqiang 14117 次浏览 来自 问答
  • 当前 Bug 的表现（可附上截图）
  • 预期表现

cover-view应漂浮在原生组件textarea的顶部

  • 复现路径

pages/index/index

请使用真机测试

  • 提供一个最简复现 Demo

推测目前textarea和cover-view应该都是以原生组件实现,所以层级关系是以渲染到页面上的顺序决定,而不是cover-view优先

做了个代码片段做测试

1.默认页面上渲染一个textarea-0和一个cover-view-0,这时一切正常

2.两秒后异步渲染出textarea-1出来,新渲染出的textarea-1覆盖在cover-view-0上

3.四秒后异步渲染出cover-view-1来,cover-view-1覆盖在所有组件上


简单如下:

onLoad: function (options) {
  var that = this
  setTimeout(function () {
    that.setData({
      testlist: [1, 2, 3, 4, 5, 6, 7,8,9,10,11,12,13,14]
    })
  }, 2000)
  setTimeout(function () {
    that.setData({
      test: true
    })
  }, 4000)
},

<textarea class='aadgb' value='第{{index}}行第{{index}}行第{{index}}行第{{index}}行第{{index}}行第{{index}}行第{{index}}行第{{index}}行第{{index}}行第{{index}}行第{{index}}行第{{index}}行第{{index}}行第{{index}}行第{{index}}行第{{index}}行第{{index}}行第{{index}}行第{{index}}行第{{index}}行第{{index}}行第{{index}}行第{{index}}行第{{index}}行第{{index}}行第{{index}}行第{{index}}行第{{index}}行第{{index}}行第{{index}}行第{{index}}行第{{index}}行第{{index}}行第{{index}}行第{{index}}行第{{index}}行第{{index}}行第{{index}}行第{{index}}行第{{index}}行第{{index}}行第{{index}}行第{{index}}行第{{index}}行第{{index}}行第{{index}}行第{{index}}行第{{index}}行第{{index}}行第{{index}}行第{{index}}行第{{index}}行第{{index}}行第{{index}}行第{{index}}行第{{index}}行第{{index}}行第{{index}}行第{{index}}行第{{index}}行第{{index}}行第{{index}}行第{{index}}行第{{index}}行第{{index}}行第{{index}}行第{{index}}行第{{index}}行第{{index}}行第{{index}}行第{{index}}行第{{index}}行第{{index}}行第{{index}}行第{{index}}行第{{index}}行第{{index}}行第{{index}}行第{{index}}行第{{index}}行第{{index}}行第{{index}}行第{{index}}行第{{index}}行第{{index}}行第{{index}}行第{{index}}行第{{index}}行第{{index}}行第{{index}}行第{{index}}行第{{index}}行第{{index}}行第{{index}}行第{{index}}行第{{index}}行第{{index}}行第{{index}}行第{{index}}行第{{index}}行第{{index}}行第{{index}}行第{{index}}行第{{index}}行第{{index}}行第{{index}}行第{{index}}行第{{index}}行第{{index}}行第{{index}}行第{{index}}行第{{index}}行第{{index}}行第{{index}}行第{{index}}行第{{index}}行'
  auto-height="{{true}}" wx:for="{{testlist}}" />
 
<cover-view class='aad1'>
  我是会被穿透的cover-view
</cover-view>
<cover-view class='aad2' wx:if="{{test}}">
  我不会被穿透的,因为我是最晚生成的
</cover-view>

具体见代码片段

建议是原生组件也能配置一个z-index属性,这样能灵活控制层级

实在不行的话,建议是把cover-view永远置顶

1 回复

你好，请参考文档：https://developers.weixin.qq.com/miniprogram/dev/component/cover-view.html

回到顶部