uni-app list组件loadmore一次触发执行两次

uni-app list组件loadmore一次触发执行两次

操作步骤：

<list ref="list" :show-scrollbar="false" @loadmore="onreachbottom"></list>
```

### 预期结果：
执行一次回调

### 实际结果：
list组件loadmore一次触发执行两次

### bug描述：
list组件loadmore一次触发执行两次

| 信息类别       | 信息内容         |
|----------------|------------------|
| 产品分类       | uniapp/App       |
| PC开发环境     | Windows          |
| PC开发环境版本 | 10               |
| HBuilderX类型  | 正式             |
| HBuilderX版本  | 3.2.6            |
| 手机系统       | iOS              |
| 手机系统版本   | iOS 13.1         |
| 手机厂商       | 苹果             |
| 手机机型       | 6s               |
| 页面类型       | nvue             |
| 打包方式       | 云端             |
| 项目创建方式   | HBuilderX        |

更多关于uni-app list组件loadmore一次触发执行两次的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app list组件loadmore一次触发执行两次的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这个问题通常是由于loadmore事件在特定条件下被重复触发导致的。以下是几种常见原因及解决方案：

1. 事件防抖处理 在onreachbottom方法中添加防抖逻辑，避免短时间内重复执行：

let isLoading = false
async function onreachbottom() {
    if (isLoading) return
    isLoading = true
    
    try {
        // 你的加载逻辑
        await loadData()
    } finally {
        isLoading = false
    }
}

2. 检查列表状态 确保在加载数据时正确设置列表状态：

async function onreachbottom() {
    if (this.loading || this.finished) return
    
    this.loading = true
    await loadData()
    this.loading = false
}

3. 使用@scroll替代方案 如果问题持续存在，可以考虑使用滚动监听：

<list 
    ref="list" 
    :show-scrollbar="false"
    @scroll="onScroll"
></list>

<script>
export default {
    methods: {
        onScroll(e) {
            const { contentHeight, scrollTop, scrollHeight } = e
            const distance = scrollHeight - scrollTop - contentHeight
            
            if (distance < 50 && !this.loading) {
                this.onreachbottom()
            }
        }
    }
}
</script>
回到顶部