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

上拉加载

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

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