<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>
- 发布:2021-08-06 10:02
- 更新:2021-08-21 14:22
- 阅读:548
产品分类: uniapp/App
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: Windows 10 专业版
HBuilderX类型: 正式
HBuilderX版本号: 3.1.22
手机系统: Android
手机系统版本号: Android 10
手机厂商: 华为
手机机型: HONOR V30 PRO
页面类型: nvue
打包方式: 云端
项目创建方式: HBuilderX
示例代码:
操作步骤:
下拉
下拉
预期结果:
能正常下拉,并且下拉动画正常
能正常下拉,并且下拉动画正常
实际结果:
下拉动作偶尔失效
下拉动作偶尔失效
bug描述:
偶尔会出现下拉失败的情况,表现为手指触摸下拉未松开,refresh组件就开始做结束的动画,在视频附件的第8s左右,也不知道是我写的有问题还是怎么情况,在iphone x上面是正常的;
还有一个问题,是吧view上面的ref="list"放到list组件上面,下拉没有问题但是下拉时nvue-downwarp-progress的旋转bindingx就没有生效;
大家有空的话可以给我看看,万分感谢~