uniapp开发app，video/map组件层级过高问题

CarelessHim
488 阅读2分钟

uniapp开发app时，会有时候想在map组件上添加弹窗或者悬浮按钮，由于uniapp本身的限制，map的层级很高并且无法通过z-index进行调整，所以需要一些其他的办法。

经过查阅官方文档，大致总结出三个解决办法。

  1. nvue

    直接使用uniapp的nvue文件模式，app-nvue模式下，可以实现同级同层渲染，但是nvue的css兼容性很差，除非是重度使用video和map，或者是nvue的熟练使用者，一般不推荐，其中有很多坑，例如display只支持flex，flex默认为纵向，默认为border-box盒模型，文本节点需要在text包裹下才可以设置字体大小等等，并且相对来说稍微新一点的css属性都无法使用，相关的css属性注意事项看这个文档即可

    uniapp.dcloud.net.cn/tutorial/nv…

  2. cover-view

    这个也是官方推荐的办法，可以实现同级同层展示，不过存在相同的css兼容性问题，内部不可以写文本节点，全部的文本节点需要用cover-view包裹，并且内部只能嵌套cover-view和cover-image，这个方法进行了尝试，我需要的是直接在组件中定义使用，没有详细了解，测试的时候组件中使用无效

  3. subNvue

    如果你需要做app端，subNvue可以在vue项目中直接嵌套子窗口实现nvue文件的效果，不过与组件的通信较为麻烦，需要使用全局监听与全局事件，使用时需要注意事件名不要重复，防止混合使用时导致的传参错误

    经过上述，第一个办法直接排除，需要的时间成本以及试错成本太长

    第二个办法写了个简单的demo可以在同文件中实现，不过我需要的是组件化，组件中使用无效，没有找到相关的解决办法，由于时间关系，没有去深究，后续再写点demo试试

    最后我采用的就是第三个方式，subNvue，直接建立nvue文件编写组件代码，需要使用的页面中，在page.json中进行相关的配置即可

// page.json配置
{
    "path": "pages/index/example",
    "style": {
        "navigationBarTitleText": "xxxx",
        "app-plus": {
             "subNVues": [{
                "id": "example-nvue",
                "path": "pages/index/subnvue/example",
                "style": {
                    "position": "dock",  // dock代表位置，默认为bottom，具体参数可以查看官方文档
                    "dock": "bottom", // 页面底部
                    "width": "100%", // 宽度
                    "height": "230rpx" // 高度
                }
            }]
        }
    }
 }

// nvue子组件(渲染时采用的是子窗体，可以按照子组件的方式理解)
// pages/index/subnvue/example.nvue
// nvue文件中直接按照正常vue写法编写代码即可
// 相关注意项查看此文档
// https://uniapp.dcloud.net.cn/tutorial/nvue-css.html

// vue父组件
// 文档https://uniapp.dcloud.net.cn/api/window/subNVues.html#app-getsubnvuebyid
uni.getSubNVueById('example-nvue').show() // 展示子窗体
uni.getSubNVueById('example-nvue').hide() // 隐藏子窗体
uni.getSubNVueById('example-nvue').setStyle() // 设置子窗体的样式
avatar
文章
阅读
粉丝