dorm-manager/dorm-manager-wx/components/list/loadmore/index.js

// components/loadmore/index.js
const
  {
    globalData: {
      util: {
        regeneratorRuntime,
        request,
        showTip
      }
    }
  } = getApp();
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    url: String,
    data: Object,
    page: {
      type: Number,
      value: 1
    },
    rows: {
      type: Number,
      value: 10
    },
    request: {
      type: String,
      value: "get"
    }
  },
  data: {
    completion: false,
    lock: false,
    state: false,
  },
  ready() {
    let reload = (param = null) => {
      this.setData({
        page: 1,
        completion: false,
        lock: false,
        param
      })
      this._observer && this._observer.disconnect()
      this._observer = wx.createIntersectionObserver(this).relativeToViewport()
      this._observer.observe('.loadmore', ({
        intersectionRatio
      }) => this.setData({
        state: intersectionRatio > 0
      }))
    }
    this.triggerEvent("reload", {
      reload
    })
    reload()
  },
  detached() {
    this._observer.disconnect();
  },
  observers: {
    state(o) {
      o && this.load()
    },
    completion(completion) {
      this.triggerEvent("loadCompletion", { completion })
    }
  },
  methods: {
    async load() {
      let {
        url,
        param,
        data,
        page,
        rows,
        completion,
        lock,
        state,
        request: req
      } = this.data
      if (lock || !state) return false
      lock = !lock;
      let {
        items = [],
        total = 0,
        _err
      } = await request[req](url, Object.assign({}, data, param, {
        page,
        rows
      }))
      if (_err) {
        _err.status && showTip(_err.errmsg || '加载列表失败')
        return this.setData({
          completion: true
        });
      }
      this.triggerEvent("getItems", {
        items
      })
      if (completion = rows * (page - 1) + items.length >= total) {
        this._observer.disconnect();
        return this.setData({
          completion
        })
      }
      this.setData({
        page: ++page
      })
      lock = !lock;
      setTimeout(() => this.load(), 1000)
    }
  }
})