uni-app list-view组件下拉刷新并不会复位
uni-app list-view组件下拉刷新并不会复位
| 开发环境 | 版本号 | 项目创建方式 |
|---|---|---|
| Windows | 10 | HBuilderX |
示例代码：
<template>
<list-view :refresher-enabled='true'
:refresher-triggered='refresh'
@refresherrefresh='refresherrefresh'
@refresherrestore="list_view_refresherrestore"
:show-scrollbar='false'>
<list-item class="item"
v-for="(item) in list">
<view>{{item}}</view>
</list-item>
<sticky-header>
<view class="item"
style="background-color: pink;margin-top: 0;">固定</view>
</sticky-header>
<list-item class="item"
v-for="(item) in list1">
<view>{{item}}</view>
</list-item>
<sticky-header>
<view class="item"
style="background-color: #000;margin-top: 0;">固定</view>
</sticky-header>
<list-item class="item"
v-for="(item) in list1">
<view>{{item}}</view>
</list-item>
</list-view>
</template>
<script>
type z = boolean
type s = string
export default {
data() {
return {
refresh: false as Boolean,
title: 'Hello' as string,
list: [] as Array<any>,
list1: [] as Array<any>
}
},
onLoad() {
for (let i : number = 0; i < 5; i++) {
this.list.push(i)
// this.list.push('1')
}
for (let i : number = 0; i < 20; i++) {
this.list1.push(i)
// this.list.push('1')
}
this.title = '222'
console.log(this.getData('3'))
},
methods: {
getData(c : s) : z {
let a = c;
let b = 3;
return a == b.toString()
},
refresherrefresh() {
setTimeout(() => {
this.refresh = false
console.log('关闭', this.refresh);
}, 2000)
},
list_view_refresherrestore() {
console.log('复位');
// setTimeout(() => {
// this.refresh = false
// console.log('关闭', this.refresh);
// }, 2000)
}
}
}
</script>
<style>
.content {
width: 100%;
}
.item {
width: 100vw;
height: 100rpx;
background-color: red;
margin-top: 20rpx;
}
</style>
### 操作步骤：
直接下拉刷新预期结果：
可取消刷新复位
### 实际结果：
并不会复位bug描述：
下拉刷新并不会复位？是我代码的问题吗？
8 回复
<script>
type z = boolean
type s = string
export default {
data() {
return {
refresh: true as Boolean,
title: 'Hello' as string,
list: [] as Array<any>,
list1: [] as Array<any>
}
},
onLoad() {
for (let i : number = 0; i < 5; i++) {
this.list.push(i)
// this.list.push('1')
}
for (let i : number = 0; i < 20; i++) {
this.list1.push(i)
// this.list.push('1')
}
this.title = '222'
console.log(this.getData('3'))
},
methods: {
getData(c : s) : z {
let a = c;
let b = 3;
return a == b.toString()
},
refresherrefresh() {
setTimeout(() => {
this.refresh = false
console.log('关闭', this.refresh);
}, 2000)
},
list_view_refresherrestore() {
console.log('复位');
// setTimeout(() => {
// this.refresh = false
// console.log('关闭', this.refresh);
// }, 2000)
}
}
}
</script>
refresherrefresh() {
this.refresh = true
setTimeout(() => {
this.refresh = false
console.log(‘关闭’, this.refresh);
}, 2000)
}, refresh 要先设置成true 才会生效
在 uni-app 中使用 list-view 组件时，如果下拉刷新后没有复位，可能是由于以下几个原因导致的。以下是一些常见的解决方案：
1. 确保 refresher-triggered 属性正确绑定
list-view 组件的下拉刷新功能依赖于 refresher-triggered 属性。当刷新完成后，你需要手动将这个属性设置为 false，以复位下拉刷新状态。
<template>
<list-view
:refresher-triggered="isRefreshing"
@refresherrefresh="onRefresh"
>
<!-- 列表内容 -->
</list-view>
</template>
<script>
export default {
data() {
return {
isRefreshing: false
};
},
methods: {
onRefresh() {
this.isRefreshing = true;
// 模拟异步请求
setTimeout(() => {
// 刷新完成后复位
this.isRefreshing = false;
}, 2000);
}
}
};
</script>2. 确保 refresher-triggered 属性在刷新完成后被设置为 false
如果你在刷新完成后没有将 refresher-triggered 设置为 false，下拉刷新状态将不会复位。确保在刷新逻辑的最后一步将其设置为 false。
3. 检查 list-view 组件的版本
确保你使用的 list-view 组件是最新版本，旧版本可能存在一些 bug 或问题。你可以通过更新 uni-app 或相关组件库来解决问题。
4. 使用 scroll-view 替代 list-view
如果 list-view 组件的问题无法解决，你可以考虑使用 scroll-view 组件来实现类似的功能。scroll-view 也支持下拉刷新，并且可能更容易控制。
<template>
<scroll-view
:refresher-triggered="isRefreshing"
@refresherrefresh="onRefresh"
scroll-y
>
<!-- 列表内容 -->
</scroll-view>
</template>
<script>
export default {
data() {
return {
isRefreshing: false
};
},
methods: {
onRefresh() {
this.isRefreshing = true;
// 模拟异步请求
setTimeout(() => {
// 刷新完成后复位
this.isRefreshing = false;
}, 2000);
}
}
};
</script>5. 检查是否有其他代码干扰
确保没有其他代码或逻辑干扰了下拉刷新的复位操作。例如，某些事件监听器或异步操作可能会影响组件的状态。
6. 使用 uni.startPullDownRefresh 和 uni.stopPullDownRefresh
如果你使用的是 uni-app 的原生下拉刷新功能，确保在刷新完成后调用 uni.stopPullDownRefresh() 来停止刷新状态。
uni.startPullDownRefresh({
success: () => {
// 模拟异步请求
setTimeout(() => {
uni.stopPullDownRefresh();
}, 2000);
}
});