uniapp遮罩层禁止下面页面上下滑动
文章描述：
uniapp弹出遮罩层禁止遮罩层下面的页面上下滑动
页面
<template>
<view class="container">
<view v-for="(item,index) in 55" :key="index" @click="showPopUp" class="item">
{{item}}
</view>
<!-- 遮罩层 -->
<popup v-if="isPopup" @closePopUp="closePopUp"></popup>
</view>
</template>
<script>
import popup from '@/components/popup.vue';
export default{
components:{
popup
},
data() {
return {
isPopup:false,
}
},
onShow() {
},
methods: {
showPopUp(){
this.isPopup = true
},
closePopUp(){
this.isPopup = false
},
moveHandle(){ //禁止蒙版下内容滑动
},
}
}
</script>
<style>
.item{
margin: 20upx 20upx;
}
</style>
遮罩层组件
<template>
<view>
<view class="mask" @touchmove.stop.prevent="moveHandle">
<view class="popup-cont">
<view class="contentBox">
<view class="closeBox">
<view class="closeButton" @click="close">关闭</view>
</view>
0000
<scroll-view scroll-y="true" style="height: 500upx;">
<view v-for="(item,index) in 55" :key="index">
{{index}}
</view>
</scroll-view>
</view>
</view>
</view>
</view>
</template>
<script>
export default{
data(){
return{
}
},
methods:{
moveHandle () {
return false
},
close(){
this.$emit('closePopUp')
}
}
}
</script>
<style lang="scss">
.mask{
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 99;
background-color: rgba(0,0,0,0.5);
}
.popup-cont{
position: fixed;
top: 50%;
left: 5%;
z-index:101;
width: 90%;
height: 600rpx;
margin-top: -300rpx;
background-color: #FFFFFF;
border-radius: 12rpx;
}
.closeBox{
display: flex;
justify-content: flex-end;
.closeButton{
font-size: 24upx;
color: rgba(0,0,0,1);
width: 60upx;
height: 60upx;
line-height: 60upx;
}
}
.contentBox{
width: 100%;
padding: 10upx 10upx;
box-sizing: border-box;
}
</style>
备注：微信小程序手机测试没得问题，支付宝测试还是可以上下滑动
发布时间：2023/01/17
发表评论