小程序scroll-view标签里引入弹窗(model)层级问题
在使用scroll-view组件时,在其内部嵌套了一个弹窗(如modal),但是弹窗无法正确显示在最上层。这是因为scroll-view默认的层级(z-index)可能会高于弹窗的层级,从而使得弹窗无法覆盖在滚动内容上。
解决办法:
使用root-portal 标签包括弹窗内容,
root-portal 使整个子树从页面中脱离出来,类似于在 CSS 中使用 fixed position 的效果。主要用于制作弹窗、弹出层等。
官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/root-portal.html
例:scroll-view标签里面引入 uview-plus的model模态框
<scroll-view :scroll-y="true" style="height:100vh">
<root-portal>
<up-modal></up-modal>
</root-portal>
</scroll-view>