uniapp 写一个scrollview列表，实现上拉加载更多数据，在点击tab切换时能更新列表里的数据，实现下拉刷新

在 UniApp 中实现上拉加载更多数据和下拉刷新的 ScrollView 列表，可以借助于组件库，如 uView UI 或 Vant UI，它们提供了相关的组件和方法来实现这些功能。以下是一个示例代码，假设你选择使用 uView UI：

1. 首先，安装 uView UI：

npm install uview-ui

2. 在 `main.js` 文件中引入 uView UI：

import uView from 'uview-ui';
Vue.use(uView);

3. 在页面的 `template` 中编写 ScrollView 列表的结构：

<template>
  <view>
    <u-scroll-view :scroll-y="true" :refresher-enabled="true" @refresher-refresh="onRefresh" :lower-threshold="100" @scrolltolower="onLoadMore">
      <view class="list">
        <view v-for="(item, index) in listData" :key="index">{{ item }}</view>
      </view>
    </u-scroll-view>
  </view>
</template>

4. 在页面的 `script` 中编写相关逻辑：

<script>
export default {
  data() {
    return {
      listData: [], // 列表数据
      page: 1, // 当前页码
      pageSize: 10, // 每页数据量
    };
  },
  methods: {
    // 下拉刷新
    onRefresh() {
      this.page = 1;
      this.listData = [];
      this.loadData();
    },
    // 上拉加载更多
    onLoadMore() {
      this.page++;
      this.loadData();
    },
    // 加载数据
    loadData() {
      // 模拟异步请求数据
      setTimeout(() => {
        // 假设每页返回10条数据
        const newData = Array.from({ length: this.pageSize }, (v, k) => `Item ${k + 1}`);
        this.listData = this.listData.concat(newData);

        // 结束下拉刷新或上拉加载更多的状态
        uni.stopPullDownRefresh();
        uni.hideNavigationBarLoading();
      }, 1000);
    },
  },
};
</script>

这样，你就可以在 ScrollView 列表中实现上拉加载更多数据和下拉刷新的功能了。当点击tab切换时，可以调用 `onRefresh` 方法来更新列表数据。请根据实际需求进行适当的调整和修改。