收藏
回答

cover-view与textarea的显示层级有BUG

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 Bug cover-view 客户端 6.7.3 2.4.0

- 当前 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永远置顶


最后一次编辑于  2019-01-02
回答关注问题邀请回答
收藏

1 个回答

  • 灵芝
    灵芝
    2019-01-02

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


    2019-01-02
    有用
    回复 2
    • 笨笨
      笨笨
      2019-01-02

      意思是不支持覆盖textarea吗?

      但实际测试时能覆盖的

      只是按照渲染的顺序覆盖了

      请核实文档是否与实际程序相符合

      2019-01-02
      回复
    • 小程序技术专员-june
      小程序技术专员-june
      2019-01-02回复笨笨

      cover-view 是有严格处理在文档中的几个父组件的情况,但是对于 textarea 的表现,不能说现在实测覆盖了就保证所有机型所有情况都是能覆盖的。


      另外原生组件目前基本上都是按照插入顺序定层级的,所以就表现来说没错。


      原生组件支持层级这个问题后续有个同层渲染的支持来解决,目前此功能正在灰度中(目前只有 video、input 组件在灰度)。

      2019-01-02
      回复
登录 后发表内容