uniapp uni-popup弹窗出现禁止页面滚动
原文链接:uniapp uni-popup弹窗出现禁止页面滚动 - 掘金 (juejin.cn)
在页面上添加遮罩层,弹出 fixed
弹窗后,在弹窗上滑动会导致下层的页面一起跟着滚动,给当前遮罩层添加catchtouchmove="true"
便可。不过在电脑上调试是无效,因为这是触摸事件,需要在手机端测试,预览生成开发版,用手机微信扫描即可看到效果。
复制代码
// 方法1 内部和外部页面都无法滚动
<view catchtouchmove="true">
<uni-popup ref="popup">
<view>xxx</view>
</uni-popup>
</view>
// 方法2 内部和外部页面都无法滚动
<view @touchmove.prevent.stop>
<uni-popup ref="popup">
<view>xxx</view>
</uni-popup>
</view>
复制代码
// 方法3 内部滚动外部不滚动
<view :class="{ fixed: !canScroll }" @click="openPopup">
xxx
</view>
<uni-popup ref="popup">
<view>xxx</view>
</uni-popup>
data() {
return {
canScroll: true
};
},
methods: {
popupChange(e) {
this.canScroll = !e.show;
},
}
.fixed{
position:fixed; // 每次都会定位到left:0;top:0;
}
posted on 2024-06-04 15:19 ZhYQ_note 阅读(1266) 评论(0) 编辑 收藏 举报
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】博客园携手 AI 驱动开发工具商 Chat2DB 推出联合终身会员
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步