微信小程序如何实现下拉刷新和上拉分页效果

这篇文章主要介绍“微信小程序如何实现下拉刷新和上拉分页效果”，在日常操作中，相信很多人在微信小程序如何实现下拉刷新和上拉分页效果问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”微信小程序如何实现下拉刷新和上拉分页效果”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

下拉刷新

下拉刷新这个玩意吧，很有用，但是在我博客关联的小程序中，用处不大，也是，我那个小程序一共也没有几个页……

我这里还是用在首页，上拉分页，下拉刷新重载分页。我就是这么做的。

下拉刷新和上拉分页还是有区别的。

下拉刷新需要在index.json中添加属性：

"enablePullDownRefresh": true

Index.js

Page({  data: {    // 文章数组    articleList:[],    //每页显示的行数：    pagesize: 20,    //页码（从1开始）    page:1,// 文章页码    //用于标识是否还有更多的状态    state: 1,    //用于数组的追加和暂存    allProject: [],  },  onReady: function () {    var self = this;    self.getArticleList();  },      getArticleList()  {    var self = this;    // 请求后台接口获取文章列表    wx.request({      // 请求连接      url: 'https://guanchao.site/index/xxxx/xxxxx,      // 请求所需要的的参数      data: {        'page':self.data.page      },      success(result){        var resData = result.data;        var resLength = result.data.length;        //如果搜出来的结果<1 就说明后面已经没数据可加载了，所以将state设为0        if (resLength < 1)        {          self.setData({            state: 0          });        }        else        {          var state1 = 1;          //如果有数据，但小于每次期望加载的数据量（pagesize）,将state设为0，表示后面已没有数据可加载          if (resLength < self.pagesize)          {            var state1 = 0;          }          //循环将结果集追加到数组后面          for (var i = 0; i < resLength; i++) {            self.data.allProject.push(resData[i]);          }          self.setData({            articleList: self.data.allProject,            state: state1          });        }        wx.hideLoading();        }    });  },    onPullDownRefresh() {    // 下拉刷新    var self = this;    wx.showLoading({      title: '加载中...',});// 页码重新设置回1self.data.page = 1;// 将显示列表数据清空    self.data.allProject = [];    self.getArticleList();    wx.stopPullDownRefresh();  },   });

可以看到，我们增加了一个onPullDownRefresh函数并在里面调用了getArticleList去请求第一页的数据，并且页面显示数据的数组清空， 页码设置成1，重新加载数据。

另外，下拉刷新的事件也可以通过调用APIwx.startPullDownRefresh触发，效果与用户手动下拉刷新一致。

上拉分页

一般APP 或者 手机端一般给我们提供的都是，上拉分页，但是vant小程序版的组件是为我们提供了类似于PC网页那样的页码分页。

但是吧，我就不太想用web网站那样做一串数字页码那样了，这是反人类的设计。使用上拉进行分页。

小程序为我们提供了上拉加载事件：onPullDownRefresh

    onPullDownRefresh: function () {    },

对，就是这个玩意。

这个直接就能触发，不需要其他什么多余的设置，下边我分享一下，我上拉分页的代码。

Index.js

Page({  data: {    // 文章数组    articleList:[],    //每页显示的行数：    pagesize: 20,    //页码（从1开始）    page:1,// 文章页码    //用于标识是否还有更多的状态    state: 1,    //用于数组的追加和暂存    allProject: [],  },  onReady: function () {    var self = this;    self.getArticleList();  },      getArticleList()  {    var self = this;    // 请求后台接口获取文章列表    wx.request({      // 请求连接      url: 'https://guanchao.site/index/xxxx/xxxxx,      // 请求所需要的的参数      data: {        'page':self.data.page      },      success(result){        var resData = result.data;        var resLength = result.data.length;        //如果搜出来的结果<1 就说明后面已经没数据可加载了，所以将state设为0        if (resLength < 1)        {          self.setData({            state: 0          });        }        else        {          var state1 = 1;          //如果有数据，但小于每次期望加载的数据量（pagesize）,将state设为0，表示后面已没有数据可加载          if (resLength < self.pagesize)          {            var state1 = 0;          }          //循环将结果集追加到数组后面          for (var i = 0; i < resLength; i++) {            self.data.allProject.push(resData[i]);          }          self.setData({            articleList: self.data.allProject,            state: state1          });        }        wx.hideLoading();        }    });  },    onReachBottom: function () {    var self = this;    var state = self.data.state;    if (state > 0){        // wx.showLoading({        //     title: '加载中...',        // });        self.data.page = self.data.page + 1;        self.getArticleList()        // wx.hideLoading();    }  },     });

到此，关于“微信小程序如何实现下拉刷新和上拉分页效果”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程网网站，小编会继续努力为大家带来更多实用的文章！