uniapp——弹窗层内容可以滚动，底部页面禁止滚动

开发项目过程中，常常需要自己写弹出框，弹出框里可能或是列表，可能会是提示。当为列表或者需要弹出框内容滚动的时候，常常会遇到底层的内容一起跟着滚动。

今天分享个解决方案，希望能够帮的上遇到此问题的小伙伴。

• 在弹出层的遮罩view标签和内容view标签分别加上@touchmove.stop.prevent="disabledScroll"

<view class="nav-bg" v-if="showTabModal" @click="onCloseMoreBg" @touchmove.stop.prevent="disabledScroll"></view>
<view class="nav-Modal" @touchmove.stop.prevent="disabledScroll" :style="`top:${barTop}`" v-if="showTabModal">
	<scroll-view scroll-y="true" class="scroll-Y">
		<view class="tab-item" v-for="(item,index) in areaList" :key="index" :data-index="index" :data-id="item.id" @click="onCloseMore">{{item.groupName}}</view>
	</scroll-view>
</view>

• 添加disabledScroll方法

methods:{
    disabledScroll(){
        return
    }
}

• 弹出层需要滚动的内容，使用scroll-view标签

.scroll-Y {
	height: 852rpx;
	width: 360rpx;
}

这样就很完美的解决了底部内容滑动的问题。

 

不断努力加油的芋头呀，持续更新中。。。