251378520
251378520
  • 发布:2018-12-05 17:58
  • 更新:2019-02-27 16:05
  • 阅读:4745

【报Bug】使用罩板后,罩板上方的滚动会穿透到罩板下方面的内容滚动上

分类:uni-app

详细问题描述
在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

2018-12-05 17:58 负责人:无 分享
已邀请:
1***@qq.com

1***@qq.com - 我是小提莫

这个问题早就遇到了

8***@qq.com

8***@qq.com

楼主关于弹出滑动穿透的问题是否已经解决了?

251378520

251378520 (作者)

官方没有反应,说APP可以优化,但是没有确定什么时候

2***@qq.com

2***@qq.com

解决了没?

7***@qq.com

7***@qq.com

解决了吗

1***@163.com

1***@163.com

@touchmove.prevent

该问题目前已经被锁定, 无法添加新回复