uni-app nvue 使用bindingx监听list组件父级view的pan事件与list中的refresh下拉事件冲突

uni-app nvue 使用bindingx监听list组件父级view的pan事件与list中的refresh下拉事件冲突

开发环境 版本号 项目创建方式
Windows 10 专业版 3.1.22 HBuilderX

bug描述:

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

还有一个问题,是吧view上面的ref="list"放到list组件上面,下拉没有问题但是下拉时nvue-downwarp-progress的旋转bindingx就没有生效;

大家有空的话可以给我看看,万分感谢~

示例代码:

<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>
`

更多关于uni-app nvue 使用bindingx监听list组件父级view的pan事件与list中的refresh下拉事件冲突的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

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

更多关于uni-app nvue 使用bindingx监听list组件父级view的pan事件与list中的refresh下拉事件冲突的实战教程也可以访问 https://www.itying.com/category-93-b0.html


有没有人啊

这是一个典型的bindingx事件冲突问题。你的代码中同时监听了父级view的pan事件和list组件的下拉刷新事件,导致手势识别冲突。

主要问题分析:

  1. 事件冲突:父级view的pan事件会拦截touch事件,影响list组件的下拉刷新识别。当手指在list区域滑动时,两个事件处理器都在竞争事件处理权。

  2. bindingx绑定时机不当:你在onpullingdown中绑定pan事件,但此时手指已经开始滑动,可能导致事件绑定延迟。

解决方案:

// 修改onpullingdown方法
onpullingdown(e) {
    console.log("onpullingdown");
    // 先解绑可能存在的旧绑定
    if (BindingDown) {
        Binding.unbind({
            token: BindingDown.token,
            eventType: "pan"
        });
    }
    
    // 直接绑定到refresh组件或progress元素,而不是父级view
    BindingDown = Binding.bind({
        anchor: this.getEl(this.$refs.progress), // 改为progress元素
        eventType: 'pan',
        props: [{
            element: this.getEl(this.$refs.progress),
            property: 'transform.rotate',
            expression: '360 + abs(y)'
        }]
    }, function(e) {
        console.log("ok");
    });
},

// 在refresh结束时清理绑定
onrefresh(e) {
    this.refreshing = true;
    
    // 先解绑pan事件
    if (BindingDown) {
        Binding.unbind({
            token: BindingDown.token,
            eventType: "pan"
        });
        BindingDown = null;
    }
    
    // 绑定timing动画
    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)
}
回到顶部