uni-app 新闻资讯App模板 增加refresh功能后下拉加载更多会跳回顶部

这个问题是由于在 nvue 页面中同时使用了 <refresh> 和 <list> 组件时，默认的滚动行为冲突导致的。

核心原因： 在 nvue 中，<refresh> 组件需要包裹可滚动区域（如 <list> 或 <scroll-view>）才能正常工作。但新闻资讯模板原生的 <list> 组件已经自带了滚动能力，当外层再添加 <refresh> 后，会形成嵌套滚动容器，导致滚动位置计算异常，从而触发跳回顶部的行为。

解决方案： 需要修改页面结构，将 <refresh> 作为 <list> 的父容器，并正确配置 <list> 的 loadmoreoffset 属性。

1. 调整模板结构：

<template>
  <refresh class="refresh" :display="refreshing" @refresh="onrefresh" @pullingdown="onpullingdown">
    <list class="list" loadmoreoffset="15" @loadmore="onloadmore">
      <!-- 原有的列表内容 -->
      <cell v-for="(item, index) in list" :key="index">
        <!-- 新闻项内容 -->
      </cell>
      <!-- 加载更多提示 -->
      <loading class="loading" @loading="onloading" :display="loadinging">
        <text class="indicator-text">加载中...</text>
        <loading-indicator class="indicator"></loading-indicator>
      </loading>
    </list>
  </refresh>
</template>

1. 关键配置说明：

• loadmoreoffset="15"：设置列表距离底部多少像素时触发 loadmore 事件，这个值需要根据实际情况调整
• 确保 <refresh> 直接包裹 <list>，不要有其他中间容器

1. 样式调整：

.refresh {
  flex: 1;
}
.list {
  flex: 1;
}

1. JavaScript 逻辑调整：

export default {
  data() {
    return {
      refreshing: 'hide',
      loadinging: 'hide',
      list: []
    }
  },
  methods: {
    onrefresh() {
      this.refreshing = 'show'
      // 执行刷新逻辑
      setTimeout(() => {
        this.refreshing = 'hide'
      }, 1000)
    },
    onloadmore() {
      this.loadinging = 'show'
      // 执行加载更多逻辑
      setTimeout(() => {
        this.loadinging = 'hide'
      }, 1000)
    }
  }
}