uniapp底部翻页

实现底部翻页的方法

在UniApp中实现底部翻页功能，通常可以通过scroll-view组件结合分页逻辑完成。以下是具体实现方式：

使用scroll-view组件

<template>
  <scroll-view 
    scroll-y 
    @scrolltolower="loadMore" 
    style="height: 100vh;"
  >
    <!-- 列表内容 -->
    <div v-for="(item, index) in list" :key="index">
      {{ item }}
    </div>
    <!-- 加载状态提示 -->
    <div v-if="loading">加载中...</div>
    <div v-if="noMore">没有更多了</div>
  </scroll-view>
</template>

分页逻辑实现

<script>
export default {
  data() {
    return {
      list: [],       // 数据列表
      page: 1,        // 当前页码
      pageSize: 10,   // 每页数量
      loading: false, // 加载状态
      noMore: false   // 是否全部加载完成
    }
  },
  methods: {
    loadMore() {
      if (this.loading || this.noMore) return;
      this.loading = true;
      this.page++;

      // 模拟API请求
      setTimeout(() => {
        const newData = this.getData(this.page, this.pageSize);
        if (newData.length === 0) {
          this.noMore = true;
        } else {
          this.list = [...this.list, ...newData];
        }
        this.loading = false;
      }, 500);
    },
    getData(page, pageSize) {
      // 实际项目中替换为真实API调用
      return Array(pageSize).fill(0).map((_, i) => 
        `Item ${(page - 1) * pageSize + i + 1}`
      );
    }
  },
  created() {
    // 初始化数据
    this.list = this.getData(1, this.pageSize);
  }
}
</script>

注意事项

• 确保scroll-view设置了固定高度，否则无法触发滚动事件
• 在@scrolltolower事件中需要添加防抖逻辑，避免重复触发
• 当数据全部加载完成后，可以通过noMore标志位阻止继续加载
• 实际项目中应将数据请求封装为独立方法

替代方案

对于更复杂的分页需求，可以考虑使用第三方组件如mescroll-uni，它提供了更完善的上拉加载和下拉刷新功能：

1. 安装mescroll-uni：

   

   npm install mescroll-uni

2. 基本使用示例：

   <template>
   <mescroll-uni @init="mescrollInit" @up="upCallback" :height="'100%'">
    <!-- 列表内容 -->
   </mescroll-uni>
   </template>

3. 配置回调方法：

   methods: {
   mescrollInit(mescroll) {
    this.mescroll = mescroll;
   },
   upCallback(mescroll) {
    // 上拉加载逻辑
   }
   }