你试试这种写法,(●'◡'●)
<template>
<view class="action">
<scroll-view scroll-y :style="'height:'+listHeight+'px;'" @scrolltolower="getData"
:lower-threshold="100" :refresher-enabled="true" :refresher-triggered="triggered"
@refresherrefresh="onRefresh" @refresherrestore="onRestore">
<view class="list" v-for="(item,index) in list" :key="index">
<view>{{item}}这是列表</view>
</view>
</scroll-view>
</view>
</template>
<script>
export default {
data() {
return {
scroll: {
trigger: false
},
list: 20,
listHeight: uni.getSystemInfoSync().windowHeight,
triggered: false,
actived: false,
}
},
methods: {
onRefresh() {
console.log("自定义下拉刷新被触发");
let that = this;
if (that.actived) {
return;
}
that.actived = true;
//界面下拉触发,triggered可能不是true,要设为true
if (!that.triggered) {
that.triggered = true;
}
this.getData();
},
onRestore() {
console.log("自定义下拉刷新被复位");
this.triggered = false;
this.actived = false;
console.log("onRestore");
},
getData() {
let that = this
//这里是调用后台接口的方法数据
setTimeout(() => {
this.triggered = false; //触发onRestore,并关闭刷新图标
this.actived = false;
}, 1000)
}
}
}
</script>
<style>
.action {
padding: 30rpx;
}
.list {
padding: 30rpx 0;
border-bottom: 1px solid #ddd;
}
</style>
TLZ (作者)
可是这个方法还是在拉下来的时候触发了,比如一直拉着不松手正常来说不触发,但他的定时器开始了,几秒后自动还原上去。还有个问题就是我手还点在那边,他还原后又触发onPulling onRefresh,不带停的
2023-08-24 14:32
TLZ (作者)
大佬有解决方案吗
2023-08-24 14:33
喜欢技术的前端
回复 TLZ:
@refresherrefresh EventHandle 自定义下拉刷新被触发
@refresherrestore EventHandle 自定义下拉刷新被复位
@refresherrestore 这个是复位的回调
2023-08-24 14:42
TLZ (作者)
回复 喜欢技术的前端: 大佬,@refresherrestore 这个复位是复位发生后触发的,就是我把 refresher-triggered绑定的值改为false才能触发,没法在里面改scroll.trigger,对我说的问题也没法影响。之前的逻辑是下拉松手的时候触发了refresherrefresh,在这个函数里把 this.scroll.trigger=false; 。但手机app运行下拉的瞬间就触发了这个方法,所有出现了问题。好像就app有问题,微信小程序这些都是没问题的
2023-08-24 16:34
TLZ (作者)
大佬,我想问问松手触发的事件是什么,app不一样吗,是我的代码问题吗
2023-08-24 16:36