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

上拉加载

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

思路：
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来监听内容到顶或到底的事件，模仿实现出上拉加载和下拉刷新性能。