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
另补充一点,把onpullingdown方法里面的代码注释掉,下拉时是正常的
更多关于uni-app nvue 使用bindingx监听list组件父级view的pan事件与list中的refresh下拉事件冲突的实战教程也可以访问 https://www.itying.com/category-93-b0.html
有没有人啊
这是一个典型的bindingx事件冲突问题。你的代码中同时监听了父级view的pan事件和list组件的下拉刷新事件,导致手势识别冲突。
主要问题分析:
-
事件冲突:父级view的pan事件会拦截touch事件,影响list组件的下拉刷新识别。当手指在list区域滑动时,两个事件处理器都在竞争事件处理权。
-
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)
}

