uni-app list的loadMore事件在切换页面回来后，第一次无法触发，第二次才触发到

uni-app list的loadMore事件在切换页面回来后，第一次无法触发，第二次才触发到

问题描述

uniapp list的loadMore事件，切换页面回来之后，第一次无法触发，第二次才触发到。 loadmoreoffset参数设置为1

1 回复

更多关于uni-app list的loadMore事件在切换页面回来后，第一次无法触发，第二次才触发到的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个常见的uni-app列表组件问题，通常与页面生命周期和列表状态管理有关。

问题原因：

  1. 页面隐藏/显示时的状态保留：当页面切换时，列表组件可能保留了之前的加载状态
  2. loadmore触发条件：列表需要滚动到特定位置才会触发，切换页面后可能位置计算异常
  3. 数据监听时机：页面onShow时数据状态可能还未完全重置

解决方案：

方案一：手动重置列表状态（推荐）

onShow() {
  // 重置列表加载状态
  this.$nextTick(() => {
    // 强制重置loadmore状态
    uni.$emit('reset-loadmore')
    // 或者直接操作列表组件
    if (this.$refs.list) {
      this.$refs.list.loadMore()
    }
  })
}

方案二：使用key强制重新渲染

<uni-list :key="listKey">

data() {
  return {
    listKey: Date.now()
  }
},
onShow() {
  this.listKey = Date.now() // 强制重新渲染
}

方案三：调整loadmoreoffset值

<uni-list loadmoreoffset="50">

将offset值调大，确保切换页面后能立即满足触发条件。

方案四：使用页面生命周期控制

onHide() {
  this.isPageActive = false
},
onShow() {
  this.isPageActive = true
  this.resetLoadMore()
}
回到顶部