uni-app调用方法实现按钮点击调用reload时页面不回到顶部

在uni-app中，当你调用页面刷新方法（如this.$refs.page.reload()）时，页面通常会重新加载并返回到顶部。如果你希望在点击按钮时刷新页面但不回到顶部，可以通过一些编程技巧来实现。一个常见的策略是使用Vue的响应式数据和条件渲染来模拟页面数据的刷新，而不是直接重新加载整个页面。

以下是一个示例代码，展示了如何在uni-app中实现这一功能：

1. 页面模板（index.vue）：

<template>
  <view>
    <button @click="refreshData">刷新数据</button>
    <view v-for="(item, index) in list" :key="index">
      {{ item }}
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [] // 假设这是你需要刷新的数据列表
    };
  },
  methods: {
    // 模拟获取数据的方法
    fetchData() {
      // 这里可以是网络请求，例如uni.request，为了简单起见，使用静态数据
      this.list = ['Item 1', 'Item 2', 'Item 3', 'Item 4'];
    },
    // 刷新数据的方法
    refreshData() {
      // 备份当前滚动位置
      const scrollTop = this.$el.scrollTop;
      // 重新获取数据
      this.fetchData();
      // 等待DOM更新后恢复滚动位置
      this.$nextTick(() => {
        this.$el.scrollTop = scrollTop;
      });
    }
  },
  mounted() {
    // 页面加载时获取数据
    this.fetchData();
  }
};
</script>

<style>
/* 样式可以根据需要调整 */
</style>

1. 说明：
   • 在data中定义了一个list数组，用于存储页面显示的数据。
   • fetchData方法模拟从服务器获取数据并更新list。
   • refreshData方法首先备份当前的滚动位置（this.$el.scrollTop），然后调用fetchData方法重新获取数据。在数据更新后（通过this.$nextTick确保DOM已更新），恢复滚动位置。
   • 在mounted生命周期钩子中调用fetchData方法，确保页面加载时已有数据。

这种方法避免了使用reload方法导致的页面重新加载和滚动位置重置，通过手动管理数据和滚动位置来实现数据的刷新和视图状态的保持。