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

【报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

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