上拉加载更多和下拉刷新，功能分析和实现方法

上拉加载更多

功能分析：上拉加载下一页

用户上滑页面 滚动条触底 开始加载下一页数据

• 判断还有没有下一页数据
  • 获取到总页数 = Math.ceil(数据总条数 / 页容量 pagesize)`
  • 获取到当前的页码 pagenum
  • 判断当前的页码是否大于等于总页数，如果是：表示 没有下一页数据
• 假如没有下一页数据，弹出提示
• 假如还有下一页数据，加载下一页数据
  • 当前的页码 ++
  • 重新发送请求
  • 数据请求回来（要对data中的数组进行拼接，而不是全部替换！！！）

// 上拉加载更多
getMore(){
    // 当前的页码是否大于等于总页数：判断是否有下一页数据
    if(this.pagenum >= this.totalPages){
      // 提示：没有下一页数据 
      return;
    }else {
      // 提示：加载中
      // 还有下一页数据
      this.pagenum++;
      // 重新请求页面数据
      this.getGoodsList();
    }
  }

// 小技巧：this.getGoodsList(); 
// 如果函数传type参数：表示初始化数据 或者 下拉刷新数据
// 如果函数不传type参数：表示加载更多数据：需要拼接数据


getGoodsList(type){
    // 发送请求获取数据，成功获取数据
    if (type === 'refresh') {
        // 请求的接口数据：一般是一个数组
        this.listdata = data.obj.list
        setTimeout(function() {
            // 关闭下拉刷新
        }, 1000)
    } else {
        // 如果函数不传type参数：表示加载更多数据：需要拼接数据
        this.listdata = this.listdata.concat(data.obj.list)
    }
    
    // 计算分页：总数据量和共有多少页面（后台已计算好）
    // 数据总页数
    this.pagedata.pages = data.obj.pages
    // 数据总条数
    this.pagedata.total = data.obj.total
    // 判断数据量是否 > 6条（6条以上的数据量，才有分页的必要）
    if (data.obj.total < 6) {
        // 提示信息：不显示加载更多
       
    } else {
        // 提示信息：显示加载更多
       
    }

}

下拉刷新

功能分析：

• 重置 数据 数组
• 重置页码设置为1
• 重新发送请求
• 数据请求回来 ，关闭刷新提示

// 下拉刷新事件
  onPullDownRefresh(){
    // 1.重置数组
    this.dataList = []
    // 2.重置页码设置为1
    this.pagenum = 1;
    // 3.重新发送请求
    this.getGoodsList('refresh');
  }