uniapp幾行代碼解決滾動穿透問題(項目實戰(zhàn))

更新時間：2023年01月11日 11:23:47 作者：夢之歸途

這篇文章主要介紹了uniapp幾行代碼解決滾動穿透問題,本文結合實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下

具體的解決方式：

<template >
  <view class="" >
    <page-meta :page-style="spanStyle"></page-meta>
  </view>
</template>
<script >
  export default {
    data() {
      return {
        spanStyle:"overflow:auto"
      }
    },
    methods: {
      mask(data){
        //當蒙層彈起時，固定界面禁止?jié)L動，當蒙層關閉時，允許滾動
        if(data){
          this.spanStyle="overflow:hidden";
        }else{
          this.spanStyle="overflow:auto";
        }
      }
    }
  }
</script >

項目實戰(zhàn)：

<template>
	<page-meta :page-style="'overflow:'+(searchPopupVisible?'hidden':'visible')" />
	
	<!--區(qū)域選擇-->
	<div class="d-toolbox cf">
		<a href="javascript:;" rel="external nofollow"  rel="external nofollow"  @click="showPopup" class="a-area" :hover="selectText!='區(qū)域'" :isOne="isOne">{{selectText}}</a>
		
		<u-popup :show="searchPopupVisible" mode="bottom" @close="searchPopupVisible = false" class="d-searchPopup cf">
			<div class="d-searchPopupBox cf">
				<strong>選擇區(qū)域</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>暫無數(shù)據</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, //是否只有一個區(qū)域
				
				selectText : '區(qū)域',
				searchPopupVisible : false,
				resultData : [],
				
			}
		},
		watch:{
			region_id(val){
				this.selectText = val == '' ? '區(qū)域' : 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':''});
			//只有一個區(qū)域的特殊情況
			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 : '區(qū)域';
				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>

PS：uniapp解決滾動條問題

在App.vue的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;
}

到此這篇關于uniapp幾行代碼解決滾動穿透問題的文章就介紹到這了,更多相關uniapp滾動穿透內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: