scroll-view标签里引入弹窗层级问题

小程序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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值