uniapp 触底分页加载

在Uni-app中实现触底分页加载可以通过监听页面滚动事件来实现。当页面滚动条触底时，可以触发onReachBottom()函数，在该函数中判断当前页是否大于等于总页数，如果是则表示已加载完所有数据，否则进行下一页数据的加载。

首先，在data中定义需要使用的数据，包括总页数、加载提示文本、是否加载完所有数据、请求参数和数据列表等。然后，在模板中添加提示消息的HTML代码，当数据加载完时，根据isLoadAll的值来显示相应的提示文本。

接着，在onReachBottom()函数中，判断当前页是否大于等于总页数，如果是，则设置isLoadAll为true，并显示提示文本为“没有更多数据啦~”，表示已加载完所有数据。如果不是，则将当前页数加1，并设置isLoadAll为false，并显示提示文本为“加载中...”，然后调用请求数据的函数querySalesCollectionDetails()，实现上拉加载更多数据的效果。

相关问题

uniapp 触底分页

在 UniApp 中实现触底分页可以通过以下步骤进行：

1. 在你的页面中定义一个数据列表数组，用于存储分页加载的数据：

data() {
  return {
    dataList: [], // 数据列表数组
    pageNo: 1, // 当前页码
    pageSize: 10, // 每页数据条数
    hasMore: true, // 是否还有更多数据
    isLoading: false // 是否正在加载中
  };
}

2. 在页面的 `onLoad` 或 `onShow` 生命周期钩子中初始化数据列表，调用数据加载方法：

onLoad() {
  this.loadData();
}

3. 实现数据加载方法，根据当前页码和每页数据条数从服务器获取数据并更新 dataList 数组：

methods: {
  loadData() {
    if (this.isLoading || !this.hasMore) {
      return; // 如果正在加载中或没有更多数据，则不执行加载操作
    }
    this.isLoading = true; // 设置加载状态为 true

    // 调用接口获取数据，传递当前页码和每页数据条数
    api.getDataList(this.pageNo, this.pageSize)
      .then(res => {
        if (res.success) {
          const newDataList = res.data; // 获取到的新数据列表
          this.dataList = this.dataList.concat(newDataList); // 将获取到的新数据追加到 dataList 数组中

          if (newDataList.length < this.pageSize) {
            this.hasMore = false; // 如果返回的数据条数小于每页数据条数，则表示没有更多数据了
          } else {
            this.pageNo++; // 更新页码
          }
        }
      })
      .finally(() => {
        this.isLoading = false; // 加载完成，重置加载状态为 false
      });
  }
}

4. 在页面的 `onReachBottom` 事件中触发加载更多数据：

onReachBottom() {
  this.loadData();
}

通过以上步骤，你可以实现一个基本的触底分页功能。当页面滚动到底部时，会自动触发 `onReachBottom` 事件，然后调用 `loadData` 方法加载更多数据并更新数据列表。需要根据实际情况调整接口调用和数据处理逻辑。

uniapp触底加载

在Uniapp中实现触底加载的功能，可以按照以下步骤进行操作：
1. 在需要实现触底加载的页面组件中，使用一个滚动容器包裹需要加载的内容。
2. 给滚动容器设置一个固定高度，可以通过设置CSS类的方式来实现，例如 ".scrollHeight { max-height: 100vh; }"。
3. 在methods方法中定义一个函数，用于处理触底加载的业务逻辑。可以命名为lowerBottom()。
4. 在lowerBottom()函数中，可以通过监听滚动容器的滚动事件，判断滚动的位置是否到达底部。
5. 当滚动到底部时，执行需要的操作，例如请求服务器加载更多的数据。
6. 在lowerBottom()函数中，也可以通过$emit方法来触发一个自定义事件，通知其他组件需要进行加载动画的显示与隐藏。

代码示例：

<template>
  <div class="scrollHeight" @scroll="lowerBottom">
    <!-- 加载的内容 -->
  </div>
</template>

<script>
export default {
  methods: {
    lowerBottom() {
      const scrollTop = this.$refs.scrollHeight.scrollTop;
      const scrollHeight = this.$refs.scrollHeight.scrollHeight;
      const clientHeight = this.$refs.scrollHeight.clientHeight;

      if (scrollTop + clientHeight >= scrollHeight) {
        // 执行触底加载的业务逻辑
        console.log("触底加载");
        
        // 请求服务器加载更多的数据
        
        // 触发加载动画的显示与隐藏事件
        this.$emit("aaa", 0); // 加载动画出现
        setTimeout(() => {
          this.$emit("aaa", 1); // 加载动画消失
        }, 3000);
      }
    },
  },
};
</script>

<style scoped>
.scrollHeight {
  max-height: 100vh;
}
</style>