移动端滚动加载

在做移动端加载更多的时候，需要了解三个属性

scrollTop

　　当前元素距离顶部的距离，换句话说就是元素滚出视窗到顶部的距离

　　document.documentElement.scrollTop

clientHeight

　　可视区域高度

　　document.body.clientHeight

scrollHeight

　　整个body的高度

　　document.documentElement.scrollHeight

也就是当

scrollTop+clientHeight >= scrollHeight 那么底部进入可视区域，即可加载更多

 

我们封装一个分页方法

首页先约定API接口参数

　　start 是开始记录数据，默认为0， 

　　count 是记录条数，默认20

返回参数

　　total

首先我们封装一个分页

class PagingModel {

  constructor(start = 0, count = 20) {
    this.start = start 
    this.count = count
    this.data = []
  }
}

export default PagingModel

加载更多，毫无疑问需要一个setMoreData方法

class PagingModel {

  constructor(start = 0, count = 20) {
    this.start = start 
    this.count = count
    this.data = []
  }

  setMoreData(newData) {
    if (!newData)  return
    // 如果有数据，那么修改start和data数据
    this.start = this.start + this.count
    this.data.concat(newData)
  }

  getStart(){
    return this.start
  }
  getCount() {
    return this.count
  }

  init() {
    this.start = 0
    this.data = []
  }
}

我们添加了3个方法一个是获得当前start，一个是获得count，最后一个初始化。

我们在完善下，无数据或者是否还有更多数据的情况

class PagingModel {

  constructor(start = 0, count = 20) {
    this.start = start 
    this.count = count
    this.data = []
    this.empty = false
    this.ending = false
  }

  setMoreData(newData) {
    if (newData.length === 0) {
      this.ending = true // 无更多数据
      if (this.data.length === 0) {
        this.empty = true // 没有数据
      }
    }
    // 如果有数据，那么修改start和data数据
    this.start = this.start + this.count
    this.data.concat(newData)
  }

  getEnding() {
    return this.ending
  }

  getEmpty() {
    return this.empty
  }

  getStart(){
    return this.start
  }
  getCount() {
    return this.count
  }

  init() {
    this.start = 0
    this.data = []
  }
}

export default PagingModel

这时候要考虑用户可能多次加载数据，也就是说服务器还没返回数据的时候，用户多次发送请求，那么我们需要锁机制

  locked() {
    this.lock = true
  }

  unLocked() {
    this.lock = false
  }

  getLock() {
    return this.lock
  }

移动端分页封主要考虑以下几点

　　数据是否为空

　　数据是否还有更多数据

　　数据是否多次加载重复请求