uniapp uni-popup弹窗出现禁止页面滚动

原文链接:uniapp uni-popup弹窗出现禁止页面滚动 - 掘金 (juejin.cn)

在页面上添加遮罩层,弹出 fixed 弹窗后,在弹窗上滑动会导致下层的页面一起跟着滚动,给当前遮罩层添加catchtouchmove="true"便可。不过在电脑上调试是无效,因为这是触摸事件,需要在手机端测试,预览生成开发版,用手机微信扫描即可看到效果。

 
javascript
复制代码
// 方法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>
 
typescript
复制代码
// 方法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;
}

来源链接:www.jianshu.com/p/c4eb3839f…

来源链接:blog.csdn.net/qq_43807473…

posted on   ZhYQ_note  阅读(1266)  评论(0编辑  收藏  举报

(评论功能已被禁用)

导航

< 2025年1月 >
29 30 31 1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31 1
2 3 4 5 6 7 8
点击右上角即可分享
微信分享提示