[已删除]
[已删除]
  • 发布:2020-06-05 12:39
  • 更新:2020-09-08 10:29
  • 阅读:784

【报Bug】Android nvue下监听move事件有问题

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: 10

HBuilderX类型: 正式

HBuilderX版本号: 2.7.9

手机系统: Android

手机系统版本号: Android 7.0

手机厂商: 魅族

手机机型: MEIZU S6

页面类型: nvue

打包方式: 离线

项目创建方式: HBuilderX

示例代码:
<template>  
    <!-- #ifdef H5   -->      
    <view   
        class="mix-refresh-content"  
        :style="{  
                transform: 'translateY('+ pageDeviation +'px)',  
                transition: pageTransition + 's',  
                height: 'calc(100% - ' + pageTop + 'px)',  
                maxHeight: 'calc(100% - ' + pageTop + 'px)'  
            }"  
        @touchstart="pageTouchstart"  
        @touchmove="pageTouchmove"  
        @touchend="pageTouchend"  
    >  
    <!-- #endif -->  
    <!-- #ifndef H5  -->      
    <view   
        class="mix-refresh-content"  
        :style="{  
                transform: 'translateY('+ pageDeviation +'px)',  
                transition: pageTransition + 's',  
                height: 'calc(100vh - ' + pageTop + 'px)',  
                maxHeight: 'calc(100vh - ' + pageTop + 'px)'  
            }"  
        @touchstart="pageTouchstart"  
        @touchmove="pageTouchmove"  
        @touchend="pageTouchend"  
    >  
    <!-- #endif -->  

        <!-- 下拉刷新 -->  
        <view class="mix-loading-wrapper">  
            <image v-if="refreshStatus < 4" :src="loadingIcon[refreshStatus]" mode="aspectFill" class="loading-icon"></image><text class="refresh-div-text">{{ refreshText[refreshStatus] }}</text>  
        </view>  

        <slot></slot>  

    </view>  
</template>  

<script>  
    let startY, moveY, windowHeight = 500, platform;  
    let timeDiff = 0;  
    let touchending;  
    export default {  
        props: {  
            top: {  
                //距离顶部距离,单位upx  
                type: Number,  
                default: 0  
            },  
            refreshText:{  
                type:Array,  
                default: ['下拉刷新', '释放更新', '刷新中...', '刷新成功', '刷新失败' ]  
            }  
        },  
        data() {  
            return {  
                atimes: 0,  
                firstStartY: 0,  
                pageDeviation: 0, //下偏移量  
                pageTransition: 0, //回弹过渡时间  
                refreshReady: false, //进入刷新准备状态  
                refreshing: false, // 进入刷新状态  
                refreshStatus: 0,  
                loadingIcon: [  
                    '../../../static/x-refresh/arrow-down.png',  
                    '../../../static/x-refresh/arrow-up.png',  
                    '../../../static/x-refresh/loading.gif',  
                    '../../../static/x-refresh/refresh-ok.png'  
                ]  
            };  
        },  
        computed: {  
            pageTop(){  
                return uni.upx2px(this.top);  
            }  
        },  
        created(){  
            uni.getSystemInfo({  
                success: function(e) {  
                    // console.log(e);  
                    platform = e.platform;  
                    windowHeight = e.windowHeight;  
                }  
            })  
        },  
        methods: {  
            pageTouchstart(e){  
                console.log('pageTouchstart')  
                if(platform === 'android'){  
                    e.stopPropagation()  
                    // e.preventDefault();  
                    // perly = 30  
                }  
                touchending = false;  
                this.pageTransition = 0;  
                if(platform === 'android' && this.atimes == 1){  
                    startY = this.firstStartY  
                }else {  
                    startY = e.touches[0].pageY;  
                }  
                this.firstStartY = startY  
                this.atimes = 1  
            },  
            pageTouchmove(e){  
                if(touchending){  
                    return;  
                }  

                moveY = (e.touches[0].pageY - startY) * 0.4;  
                console.log('moveY', moveY)  
                if(moveY >= 0){  
                    this.pageDeviation = moveY;  
                    // this.$emit('setEnableScroll', false);  
                }  
                let perly = 50  

                if(moveY >= perly && this.refreshReady === false){  
                    this.refreshReady = true;  
                    this.refreshStatus = 1;  
                    if(platform === 'android'){  
                        // this.pageTouchend();  
                    }  
                }else if(moveY < perly && this.refreshReady === true){  
                    this.refreshReady = false;  
                    this.refreshStatus = 0;  
                }  
                if(platform === 'ios' && e.touches[0].pageY > windowHeight + 10){  
                    this.pageTouchend();  
                }  
            },  
            pageTouchend(){  
                console.log('pageTouchendpageTouchendpageTouchend')  
                touchending = true;  
                if(moveY === 0){  
                    return;  
                }  
                console.log('refreshReady', moveY)  
                this.pageTransition = 0.3;  
                if(moveY >= 50){  
                    this.startPulldownRefresh();  
                }else{  
                    this.pageDeviation = 0;  
                }  

                if(this.refreshReady === true){  
                    this.refreshReady = false;  
                }  
                //修复下拉一点回弹后页面无法滚动的bug  
                this.$emit('setEnableScroll', true);  
                startY = moveY = 0;  
            },  
            //开启下拉刷新  
            startPulldownRefresh(){  
                if(+new Date() - timeDiff < 100){  
                    return;  
                }  
                timeDiff = +new Date();  
                this.refreshing = true;  
                this.refreshStatus = 2;  
                this.pageDeviation = uni.upx2px(90);  
                this.$emit('refresh');  
            },  
            //结束下拉刷新  
            endPulldownRefresh(){  
                this.refreshStatus = 3;  
                this.refreshing = false;  
                this.pageDeviation = uni.upx2px(0);  
                //this.$emit('setEnableScroll', true);  
            },  
        }  
    }  
</script>  

<style>  
    .mix-refresh-content{  
        position: relative;  
        padding-top: 120upx;  
    }  
    /* 下拉刷新部分 */  
    .mix-loading-wrapper{  
        position: absolute;  
        left: 0;  
        top: 0;  
        right: 0;  
        /* transform: translateY(-100%); */  
        height: 120upx;  
        flex-direction: row;  
        justify-content: center;  
        align-items: center;  
        /* width: 300upx; */  
    }  

    .mix-loading-icon{  
        width: 70upx;  
        height: 70upx;  
        /* #ifdef MP-WEIXIN */  
        transition: .3s;  
        /* #endif */  
    }  
    .mix-loading-icon.ready{  
        /* #ifdef MP-WEIXIN */  
        transform: scaleX(1.3);  
        /* #endif */  
    }  
    .mix-loading-icon.active{  
        /* #ifdef MP-WEIXIN */  
        animation: loading .5s ease-in infinite both alternate;  
        /* #endif */  
    }  

    /* #ifndef MP-WEIXIN */  
    @keyframes loading {  
        0% {  
            transform: translateY(-20upx) scaleX(1);  
        }  
        100% {  
            transform: translateY(4upx)  scaleX(1.3);  
        }  
    }  
    /* #endif */  

    .loading-icon {  
        width: 32upx;  
        height: 32upx;  
        margin-right: 10upx;  
        margin-left: -40upx;  
    }  

    .refresh-div-text {  
        font-size: 28upx;  
        color: #999;  
        line-height: 120upx;  
        text-align: left;  
        justify-content: center;  
    }  
</style>  

操作步骤:

传入一个list或其他组件就可以

预期结果:

android端成功监听到move事件,实现下拉刷新

实际结果:

在android环境下,touchmove只监听到向下拖动的相应,向上拖动则没有;touchend事件无法监听;
在ios和小程序中没有这个问题

bug描述:

在android环境下,touchmove只监听到向下拖动的相应,向上拖动则没有;touchend事件无法监听;
在ios和小程序中没有这个问题

2020-06-05 12:39 负责人:无 分享
已邀请:
嗨哆嚒

嗨哆嚒 - 嗨哆嚒

老哥你解决没有,我H5和app都不能监听

  • [已删除] (作者)

    没解决,使用条件编译了,app端直接用list

    2020-08-25 09:51

  • 嗨哆嚒

    回复 [已删除]: 我重新拉取了主分支,又莫名的好了,同时还解决了突然不能热更新的问题。。希望以后不会再遇见这个bug

    2020-08-25 10:19

1***@qq.com

1***@qq.com - BS

下拉刷新 还是使用《refresh》 比较好

  • 嗨哆嚒

    我不是下拉刷新,是canvas的触摸结束

    2020-08-25 09:47

1***@qq.com

1***@qq.com - BS

这个是官方自带的

1***@qq.com

1***@qq.com

把view改成div试试

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