关于小程序:微信小程序上拉加载与下拉刷新

上拉加载

利用场景：
微信内容页上拉加载，拉到最底部呈现提醒文案

思路：
1. 初始页号为 1
2. 应用微信自带的办法 onReachBottom 检测滚动到底部，页号 pageNo+1，而后去申请后盾接口，把最新返回的后果增加到原来的数组里，从新渲染思路有了那么咱们开始上代码把
3. 当你调取的接口里的数据 length<pageSize

Page({
  data: {
    page: 1,
    pages: 0,
    articles: []},

  onLoad(options) {
    // 页面首次加载，申请第一页数据
    this.getInfoListData(1)
  },

  onReachBottom() {
    // 下拉触底，先判断是否有申请正在进行中
    // 以及查看以后申请页数是不是小于数据总页数，如符合条件，则发送申请
    if (!this.loading && this.data.page < this.data.pages) {this.getInfoListData(this.data.page + 1)
    }
  },

  getInfoListData(pageNo) {
    this.loading = true

    // 向后端申请指定页码的数据
    return getArticles(pageNo).then(res => {
      const articles = res.items
      this.setData({
        page: pageNo,     // 以后的页号
        pages: res.pages,  // 总页数
        articles: this.data.articles.concat(articles)
      })
    }).catch(err => {console.log( err)
    }).then(() => {this.loading = false})
  }
})

下拉刷新

1. 配置 json

{"enablePullDownRefresh": true}

2.

Page({

  data: {
    page: 1,
    pages: 0,
    articles: []},

  onLoad(options) {
    // 页面首次加载，申请第一页数据
    this.getInfoListData(1, true)
  },

  onReachBottom() {
    // 下拉触底，先判断是否有申请正在进行中
    // 以及查看以后申请页数是不是小于数据总页数，如符合条件，则发送申请
    if (!this.loading && this.data.page < this.data.pages) {this.getInfoListData(this.data.page + 1)
    }
  },

  onPullDownRefresh() {
    // 上拉刷新
    if (!this.loading) {this. getInfoListData(1, true).then(() => {
        // 解决实现后，终止下拉刷新
        wx.stopPullDownRefresh()})
    }
  },

  getInfoListData(pageNo, over) {
    this.loading = true

    // 向后端申请指定页码的数据
    return getArticles(pageNo).then(res => {
      const articles = res.items
      this.setData({
        page: pageNo,     // 以后的页号
        pages: res.pages,  // 总页数
        articles: over ? articles : this.data.articles.concat(articles)
      })
    }).catch(err => {console.log( err)
    }).then(() => {this.loading = false})
  }

})

备注：
如果你须要部分的相应性能，你能够尝试应用 <scroll-view> 做容器，并通过它的 bindscrolltoupper 和bindscrolltolower来监听内容到顶或到底的事件，模仿实现出上拉加载和下拉刷新性能。