uniapp tab上拉加载下拉刷新组件

uniApp 的 Tab 上拉加载和下拉刷新组件是一种常见的界面交互设计，用于增强 Tab 页面的内容滚动体验。当你滚动到底部时，如果还有更多内容可以加载，这个组件通常会显示一个“加载更多”的提示，并在用户触发动作（如快速上滑或点击特定区域）后，通过网络请求获取新的数据并自动填充到页面底部。

具体实现步骤如下：
1. 使用 `scroll-view` 组件作为基础容器，设置 `scroll-y` 属性使其支持竖向滚动。
2. 配置 `@reach-bottom` 或者 `@load-more` 事件监听器，在用户触底时判断是否需要加载更多数据。
3. 设置 `show-scrollbar` 和 `scroll-top` 属性来控制滚动条的显示以及初始滚动位置。
4. 编写逻辑来处理实际的网络请求和数据显示更新。

示例代码可能会类似这样：

<view class="tab-content">
  <scroll-view scroll-y @reach-bottom="loadMoreData" :scroll-top="scrollTop" show-scrollbar>
    <!-- 内容列表 -->
    <list-item v-for="item in dataList" :key="item.id"></list-item>
  </scroll-view>
</view>

<script>
export default {
  data() {
    return {
      dataList: [],
      scrollTop: 0,
    };
  },
  methods: {
    loadMoreData() {
      // 加载更多数据的逻辑，比如异步请求 API
      this.$axios.get('/api/load-more')
        .then(response => {
          this.dataList.push(...response.data);
          this.scrollTop = this.scrollHeight; // 更新滚动高度
        })
        .catch(error => {
          console.error('加载更多失败:', error);
        });
    },
  },
};
</script>