uniapp上拉加载更多详解

一、uniapp上拉加载更多公共方法

uniapp上拉加载更多常用公共方法如下：

// 调用下拉刷新方法
this.$refs.loadmore.onTopLoaded();

// 调用上拉加载更多方法
this.$refs.loadmore.onBottomLoaded();

其中，onTopLoaded()方法用于在下拉刷新后重置上拉加载更多组件的状态，可在页面中调用。onBottomLoaded()方法用于在数据加载完成后重置上拉加载更多组件的状态，可在请求接口回调函数中调用。

上拉加载更多组件需要在template中使用，如下示例：

  
    
    

    
    
      
        {{noMoreText}}
      
    
  

在script部分中，需要定义onTopEvent()方法和loadData()方法。

  export default {
    data() {
      return {
        // 上拉加载更多组件数据
        loadingText: '加载中...', // 加载中文本
        noMoreText: '没有更多了' // 没有更多文本
      }
    },
    methods: {
      // 下拉刷新回调函数，可选
      onTopEvent(done) {
        setTimeout(() => {
          // 渲染完数据后，调用done()方法结束下拉刷新状态
          // done()方法将回调onTopLoaded()方法，重置上拉加载更多组件的状态
          done();
        }, 1000);
      },

      // 上拉加载更多回调函数，必选
      loadData() {
        const page = this.page;

        // 请求接口，渲染数据
        // ...

        // 如果没有更多数据，需要将组件状态修改为“没有更多了”
        if (!hasMoreData) {
          this.$refs.loadmore.noMore(); // this.$refs.loadmore为上拉加载更多组件对象
        } else {
          this.page++; // 页码+1
        }

        // 请求结束后，调用onBottomLoaded()方法重置上拉加载更多组件的状态
        this.$refs.loadmore.onBottomLoaded();
      }
    }
  }

二、uniapp实现上拉加载更多

通过在页面中引入上拉加载更多组件，即可实现上拉加载更多功能。

首先，在template中引入组件：

  
    
    

    
    
      
        {{noMoreText}}
      
    
  

然后，在script部分中实现onTopEvent()方法和loadData()方法，代码示例与上面的公共方法部分相同。

三、uniapp上拉加载更多tp5

在使用uniapp上拉加载更多组件时，需要后端提供接口支持。以下是tp5框架下实现上拉加载更多的一些注意事项：

1、在接口中，需要返回当前页的数据和总共的数据数量。例如：

{
  "data": [...], // 当前页的数据
  "count": 100 // 总共的数据数量
}

2、在loadData()方法中，需要将总共的数据数量保存到data中。例如：

  export default {
    data() {
      return {
        // 上拉加载更多组件数据
        loadingText: '加载中...', // 加载中文本
        noMoreText: '没有更多了', // 没有更多文本
        total: 0 // 总共的数据数量
      }
    },
    methods: {
      loadData() {
        const page = this.page;

        // 请求接口，渲染数据
        // ...

        // 如果没有更多数据，需要将组件状态修改为“没有更多了”
        if (!hasMoreData) {
          this.$refs.loadmore.noMore(); // this.$refs.loadmore为上拉加载更多组件对象
        } else {
          this.page++; // 页码+1
        }

        // 请求结束后，调用onBottomLoaded()方法重置上拉加载更多组件的状态
        this.$refs.loadmore.onBottomLoaded();
      }
    }
  }

3、根据总共的数据数量，计算当前页是否为最后一页。例如：

  export default {
    data() {
      return {
        page: 1, // 页码
        pageSize: 10, // 每页数据数量
        total: 0 // 总共的数据数量
      }
    },
    methods: {
      loadData() {
        const page = this.page;
        const pageSize = this.pageSize;

        // 请求接口，渲染数据
        // ...

        // 如果没有更多数据，需要将组件状态修改为“没有更多了”
        if (page * pageSize >= this.total) {
          this.$refs.loadmore.noMore(); // this.$refs.loadmore为上拉加载更多组件对象
        } else {
          this.page++; // 页码+1
        }

        // 请求结束后，调用onBottomLoaded()方法重置上拉加载更多组件的状态
        this.$refs.loadmore.onBottomLoaded();
      }
    }
  }

四、uniapp上拉加载更多组件

uniapp官方提供了一个上拉加载更多组件：loadmore。可以在uniapp官方文档中查看详细使用方法。

示例代码：

  
    {{noMoreText}}
  

五、uniapp上拉加载更多数据

要实现uniapp上拉加载更多，需要先获取当前页码和每页数据数量。例如：

  export default {
    data() {
      return {
        page: 1, // 页码
        pageSize: 10 // 每页数据数量
      }
    },
    methods: {
      loadData() {
        const page = this.page;
        const pageSize = this.pageSize;

        // 请求接口，渲染数据
        // ...

        // 请求结束后，调用onBottomLoaded()方法重置上拉加载更多组件的状态
        this.$refs.loadmore.onBottomLoaded();
      }
    }
  }

注：以上代码仅为示例，请求接口需要具体根据实际情况进行编写。

六、uniapp上拉加载更多不生效

以下是一些常见的导致上拉加载更多不生效的原因：

1、没有正确引入上拉加载更多组件。

2、loadData()方法没有正确设置页码。

3、请求接口返回的数据格式不正确。

通过检查以上几个方面，可以解决上拉加载更多不生效的问题。