uniapp几行代码解决滚动穿透问题(项目实战)
梦之归途 人气:0具体的解决方式:
<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>
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; }
加载全部内容