花志飘零
花志飘零
  • 发布:2021-08-06 10:02
  • 更新:2021-08-21 14:22
  • 阅读:548

【报Bug】nvue 使用bindingx监听list组件父级view的pan事件与list中的refresh下拉事件冲突

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

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

HBuilderX类型: 正式

HBuilderX版本号: 3.1.22

手机系统: Android

手机系统版本号: Android 10

手机厂商: 华为

手机机型: HONOR V30 PRO

页面类型: nvue

打包方式: 云端

项目创建方式: HBuilderX

示例代码:
<template>  
    <view class="list-wrap" ref="list">  
        <list class="list-wrap" :show-scrollbar="false" enableBackToTop="true" scroll-y loadmoreoffset="15">  
            <refresh class="refresh" :display="refreshing ? 'show' : 'hide'" @refresh="onrefresh"  
                @pullingdown="onpullingdown">  
                <div class="refresh-view">  
                    <view ref="progress" class="nvue-downwarp-progress"></view>  
                    <text class="loading-text">{{refreshText}}</text>  
                </div>  
            </refresh>  
        </list>  
    </view>  
</template>  

<script>  
    var BindingDown = null;  
    const Binding = uni.requireNativePlugin('bindingx');  
    export default {  
        data() {  
            return {  
                // 是否 进行下拉中  
                refreshing: false,  
            }  
        },  
        computed: {  
            refreshText() {  
                return "加载中"  
            }  
        },  
        onLoad() {  
            console.log(233333);  
        },  
        methods: {  
            getEl: function(el) {  
                if (typeof el === 'string' || typeof el === 'number') return el;  
                if (WXEnvironment) {  
                    return el.ref;  
                } else {  
                    return el instanceof HTMLElement ? el : el.$el;  
                }  
            },  
            // 完成下拉  
            onrefresh(e) {  
                this.refreshing = true;  
                var result = Binding.bind({  
                    eventType: 'timing',  
                    props: [{  
                        element: this.getEl(this.$refs.progress),  
                        property: 'transform.rotate',  
                        expression: "t%600 / 600 * 360"  
                    }]  
                }, function(e) {  
                    console.log("timing");  
                });  
                setTimeout(() => {  
                    Binding.unbind({  
                        token: result.token,  
                        eventType: "timing"  
                    })  
                    this.refreshing = false;  
                }, 1000)  
            },  
            // 进行下拉  
            onpullingdown(e) {  
                console.log("onpullingdown");  
                BindingDown = Binding.bind({  
                    anchor: this.getEl(this.$refs.list),  
                    eventType: 'pan',  
                    props: [{  
                        element: this.getEl(this.$refs.progress),  
                        property: 'transform.rotate',  
                        expression: '360 + abs(y)'  
                    }]  
                }, function(e) {  
                    console.log("ok");  
                });  
            },  
        },  
    }  
</script>  

<style scoped>  
    .list-wrap{  
        width: 750rpx;  
        height: 1000rpx;  
    }  
    .refresh-view {  
        flex-direction: row;  
        justify-content: center;  
        align-items: center;  
        height: 100rpx;  
        width: 750rpx;  
    }  

    .nvue-downwarp-progress {  
        width: 32rpx;  
        height: 32rpx;  
        border: 2rpx solid gray;  
        border-radius: 25rpx;  
        border-right-color: rgba(0, 0, 0, 0);  
    }  

    .loading-text {  
        font-size: 28rpx;  
        margin-left: 16rpx;  
        color: gray;  
    }  
</style>  

操作步骤:

下拉

预期结果:

能正常下拉,并且下拉动画正常

实际结果:

下拉动作偶尔失效

bug描述:

偶尔会出现下拉失败的情况,表现为手指触摸下拉未松开,refresh组件就开始做结束的动画,在视频附件的第8s左右,也不知道是我写的有问题还是怎么情况,在iphone x上面是正常的;

还有一个问题,是吧view上面的ref="list"放到list组件上面,下拉没有问题但是下拉时nvue-downwarp-progress的旋转bindingx就没有生效;
大家有空的话可以给我看看,万分感谢~

2021-08-06 10:02 负责人:无 分享
已邀请:
花志飘零

花志飘零 (作者)

另补充一点,把onpullingdown方法里面的代码注释掉,下拉时是正常的

花志飘零

花志飘零 (作者)

有没有人啊

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