uniapp弹窗阻止底部页面滑动
时间: 2023-08-02 16:08:16 浏览: 77
在 uni-app 中实现弹窗阻止底部页面滑动,可以使用 `uni-popup` 组件和 `@scroll.native.stop` 修饰符。
具体实现步骤如下:
1. 在需要弹出的页面中,使用 `uni-popup` 组件来实现弹出框的效果,并给 `uni-popup` 组件添加 `@scroll.native.stop` 修饰符,如下所示:
```
<template>
<view>
<button @click="showPopup">显示弹窗</button>
<uni-popup v-model="show" @scroll.native.stop>
<!-- 弹窗内容 -->
</uni-popup>
</view>
</template>
<script>
export default {
data() {
return {
show: false
}
},
methods: {
showPopup() {
this.show = true
}
}
}
</script>
```
2. 在 `@scroll.native.stop` 修饰符中,添加一个方法来阻止底部页面的滑动,如下所示:
```
<template>
<view>
<button @click="showPopup">显示弹窗</button>
<uni-popup v-model="show" @scroll.native.stop="preventScroll">
<!-- 弹窗内容 -->
</uni-popup>
</view>
</template>
<script>
export default {
data() {
return {
show: false
}
},
methods: {
showPopup() {
this.show = true
},
preventScroll(event) {
// 阻止底部页面的滑动
event.preventDefault()
}
}
}
</script>
```
这样,在弹窗弹出时,底部页面的滑动就会被阻止了。