uniapp几行代码解决滚动穿透问题(项目实战)

<template >
  <view class="" >
    <page-meta :page-style="spanStyle"></page-meta>
  </view>
</template>
<script >
  export default {
    data() {
      return {
        spanStyle:"overflow:auto"
      }
    },
    methods: {
      mask(data){
        //当蒙层弹起时，固定界面禁止滚动，当蒙层关闭时，允许滚动
        if(data){
          this.spanStyle="overflow:hidden";
        }else{
          this.spanStyle="overflow:auto";
        }
      }
    }
  }
</script >

<template>
	<page-meta :page-style="'overflow:'+(searchPopupVisible?'hidden':'visible')" />
	
	<!--区域选择-->
	<div class="d-toolbox cf">
		<a href="javascript:;" rel="external nofollow"  rel="external nofollow"  @click="showPopup" class="a-area" :hover="selectText!='区域'" :isOne="isOne">{{selectText}}</a>
		
		<u-popup :show="searchPopupVisible" mode="bottom" @close="searchPopupVisible = false" class="d-searchPopup cf">
			<div class="d-searchPopupBox cf">
				<strong>选择区域</strong>
				<div v-if="resultData.length > 0">
					<!--解决滚动穿透-->
					<scroll-view scroll-y="true" style="height:100%;">
						<em v-for="(item,index) in resultData" :key="index" :class="item.region_id == region_id ? 'hover' : ''" @click="selectArea(item)">{{item.region_name}}</em>
					</scroll-view>
				</div>
				<div v-else>
					<em>暂无数据</em>
				</div>
				<a href="javascript:;" rel="external nofollow"  rel="external nofollow"  @click="searchPopupVisible = false">取消</a>
			</div>
		</u-popup>
	</div>
</template>
 
<script>
	export default {
		props: {
			region_id: {
				type: [String,Number],
				default: ''
			},
			calbackFunName: {
				type: String,
				default: 'onToolAreaCallback'
			},
		},
		data() {
			return {
				isOne : false, //是否只有一个区域
				
				selectText : '区域',
				searchPopupVisible : false,
				resultData : [],
				
			}
		},
		watch:{
			region_id(val){
				this.selectText = val == '' ? '区域' : this.resultData.find(item=>item.region_id == val).region_name
			},
		},
		mounted() {
			this.storage_authorInfo = uni.getStorageSync('storage_authorInfo') ? JSON.parse(uni.getStorageSync('storage_authorInfo')) : {};
			this.resultData = this.storage_authorInfo.Store;
			this.resultData.unshift({'region_name':'全部','region_id':''});
			//只有一个区域的特殊情况
			if(this.resultData.length === 2){
				this.isOne = true
				this.selectText = this.resultData[1].region_name
			}
			
		},
		methods: {
			showPopup(){
				if(this.isOne) return
				this.searchPopupVisible = true
			},
			selectArea(item){
				this.searchPopupVisible = false;
				this.selectText = item.region_id ? item.region_name : '区域';
				uni.$emit(this.calbackFunName , {
					region_id : item.region_id,
					region_name : item.region_name
				})
			}
		}
		
	}
</script>
 
<style lang="scss" scoped>
.d-toolbox {
	display:inline-block;
	position: relative;
	.a-area{
		font-size: 24rpx; color:#333; display: flex; align-items: center;
		&:after{
			content:'';width:24rpx; height:24rpx; background: url(/static/img/index/arrows.png) no-repeat; background-size:100%; margin-left:10rpx;
		}
		&[isOne="true"]:after{
			display:none; 
		}
		&[hover="true"]{
			color:#4568E8;
			&:after{
				background-image: url(/static/img/index/arrows-hover.png);
			}
		}
	}
}
 
.d-searchPopup{
	/deep/.u-popup__content{
		border-radius: 20rpx 20rpx 0 0; overflow: hidden;
	}
	.d-searchPopupBox{
		background: #fff;
		strong{
			display: block;
			text-align: center;
			font-size:32rpx;
			color:#333;
			height:100rpx;
			line-height: 100rpx;
			border-bottom: solid #F5F5F5 1px;
		}
		div{
			position: relative; max-height: 480rpx; overflow-y: auto;
			em , a{
				display: block;
				text-align: center;
				color:#333; font-size:28rpx;
				height:79rpx; line-height: 79rpx;
				border-bottom:solid #F5F5F5 1rpx;
				&:last-child{
					border:0;
				}
			}
			.hover{
				color:#4568E8;
			}
		}
		a{
			display: block;
			text-align: center;
			color:#333; font-size:28rpx;
			height:80rpx; line-height: 80rpx;
			border-top:solid #F5F5F5 14rpx;
		}
	}
}
 
</style>

/* 解决小程序和app滚动条的问题 */
/* #ifdef MP-NEIXIN 11 APP-PLUS */

::-webkit-scrollbar {
display: none;
width: 0 !important;
height: 0 !important;
-webkit-appearance: none;
background: transparent;
color: transparent;
}

/* #endif */
/* 解决H5的问题 */
/* #ifdef H5 */

uni-scroll-view .uni-scroll-view::webkit-scrollbar {
/* 隐藏滚动条,但依旧具备可以滚动的功能 */
display: none;
width: 0 !important;
height: 0 !important;
-webkit-appearance: none;
background: transparent;
color: transparent;
}