详细问题描述
在uni-app中,使用罩板时,在罩板上面的滚动和下拉会穿透到罩板下方父页面的滚动上。
已经使用了 catchtouchmove="true"(这个只能阻止点击穿透,不能阻止滚动穿透)
官方的picker, 单列选择、多列选择,城市联动picker都不会出现这种情况 。
附件是操作视频。(不知道怎么直接传视频)。
以下是我的代码:
<template>
<view>
<button type="primary" @click="showTest">显示Mask</button>
<view class="uni-list">
<view class="uni-list-cell" v-for="(item,index) in rangeData" :key="index">
<view class="uni-list-cell-navigate uni-navigate-right">
{{item}}
</view>
</view>
</view>
<view class="uni-drawer-mask" :class="{'pickerMask':show}" @click="maskClick" :catchtouchmove="true"></view>
<view class="test-dh" :class="{'test-show':show}" :catchtouchmove="true">
<scroll-view scroll-y>
<view>
<view class="uni-list">
<view class="uni-list-cell" v-for="(item,index) in testData" :key="index">
<view class="uni-list-cell-navigate uni-navigate-right">
{{item}}
</view>
</view>
</view>
</view>
</scroll-view>
</view>
</view>
</template>
<script>
var self;
export default {
data() {
return {
show: false,
}
},
onLoad: function() {
self = this;
},
onPullDownRefresh: function() {
setTimeout(uni.stopPullDownRefresh(), 2000);
},
onBackPress: function() {
if (this.show) {
this.show = false;
return true;
}
return false;
},
components: {
},
computed: {
rangeData: function() {
var result = [];
for (var i = 0; i < 20; i++) {
result.push((i + 1) + "号")
}
return result;
},
testData: function() {
var result = [];
for (var i = 0; i < 20; i++) {
result.push("第" + (i + 1) + "项")
}
return result;
}
},
methods: {
maskClick(e) {
self.show=false;
},
showTest(e) {
self.show = !self.show;
},
}
}
</script>
<style>
/* picker {
flex:1;
} */
.pickerMask {
position: fixed;
z-index: 100;
top: 0;
right: 0;
left: 0;
bottom: 0;
background: rgba(255, 0, 0, 0.3);
}
.test-dh {
background-color: yellow;
height: 320px;
transition: all 0.5s;
transform: translateY(100%);
position: fixed;
bottom: 0;
left: 0;
width: 100%;
display: flex;
border-top: 0.1px solid #d9d9d9;
z-index: 1001;
}
.test-show {
transform: translateY(0);
}
</style>
IDE运行环境说明
HBuilderX,哪个版本都一样。win7系统
App运行环境说明
Android
附件
联系方式
251378520