uniapp z-paging 在onshow调用闪屏问题如何解决

我在使用uniapp的z-paging组件时，遇到一个闪屏问题：每次页面onshow生命周期触发时，列表会先闪现空白再重新加载数据。试过在onLoad和onShow里都调用过reload方法，但依然会出现短暂的白屏。请问有什么办法可以避免这种闪屏现象？或者应该在哪里正确调用加载方法？

2 回复

在onshow中调用z-paging刷新时，建议添加延迟处理。可以用setTimeout包裹刷新方法，延迟100-200ms执行，避免页面渲染未完成导致的闪屏。


在 UniApp 中使用 z-paging 组件时，如果在 onShow 生命周期中调用数据加载方法，可能会出现页面闪屏问题。这是因为 onShow 触发时页面可能尚未完全渲染，导致数据加载与页面渲染冲突。以下是解决方案：

1. 延迟加载数据

使用 setTimeout 或 nextTick 延迟数据加载，确保页面渲染完成后再调用。

onShow() {
  this.$nextTick(() => {
    this.$refs.paging.reload(); // 通过 ref 调用 z-paging 的 reload 方法
  });
}

或：

onShow() {
  setTimeout(() => {
    this.$refs.paging.reload();
  }, 50); // 延迟 50ms
}

2. 结合 onLoad 和 onShow

首次加载在 onLoad 中调用，后续显示在 onShow 中通过条件判断避免重复加载。

data() {
  return {
    isFirstLoad: true
  };
},
onLoad() {
  this.$refs.paging.reload(); // 首次加载
},
onShow() {
  if (!this.isFirstLoad) {
    this.$refs.paging.reload(); // 非首次才刷新
  }
  this.isFirstLoad = false;
}

3. 使用 z-paging 的 auto 属性

设置 auto="false" 关闭自动加载，通过手动调用 reload 控制时机。

<z-paging ref="paging" :auto="false" [@query](/user/query)="queryList">
  <!-- 列表内容 -->
</z-paging>

onShow() {
  this.$nextTick(() => {
    this.$refs.paging.reload();
  });
}

4. 避免在 onShow 中频繁重置数据

如果数据无变化，无需每次 onShow 都调用 reload，可通过状态管理减少操作。

总结

核心思路是确保页面渲染完成后再加载数据。推荐使用 $nextTick 或短延时 setTimeout，并结合首次加载标志优化性能。根据实际场景选择合适方案即可解决闪屏问题。

回到顶部