uniapp uview使用u-popup组件当开启遮罩层禁止下层页面滚动。uniapp弹框禁止页面上下滚动。

本文介绍了如何在使用uniapp的u-popup组件时阻止页面滚动。方法二是通过动态绑定CSS类实现,当遮罩层打开时,添加'popupShow'类使页面不可滚动,关闭时移除该类恢复正常滚动。此方法有效且符合需求。

在使用uview的u-popup时,u-popup弹出但是上下滑动蒙版位置时底层页面还是会被滑动,需要有两种方法可以解决。当使用uniapp弹框时想禁止页面滚动也可以用这种方法。

先尝试方法二!!!先尝试方法二!!!先尝试方法二!!!先尝试方法二!!!

方法一:给底层view直接加一个禁止滚动的事件

<view @touchmove.stop.prevent="stopRoll">

</view>

methods: {
    stopRoll() {}
}

@touchmove.stop.prevent是禁止页面滚动事件,可以给方法一个空值,也可以生效。

这个感觉不符合我的需求所以没有用

方法二:用css控制并动态绑定class名来实现,在遮罩层打开的时候css样式也开启,关闭时css样式失效。

<view class="my" @touchend="end" @touchmove="move" :class="{popupShow:popupShow}">
  <u-popup :show="popupShow" mode="right" @close="closeMenu" 
	bgColor="#161823" 
	safeAreaInsetTop
  >
  </u-popup>
  <u-button type="primary" class="top-right-btn" @click="openMenu">开启遮罩层</u-button>
</view>
<script>
export default {
  data() {
	return {
      popupShow:false;
    }
  }
  methods:{
    openM
评论 19
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值