微信小程序实现下拉刷新和上拉分页效果的方法详解

第微信小程序实现下拉刷新和上拉分页效果的方法详解目录下拉刷新上拉分页

下拉刷新

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

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

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

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

enablePullDownRefresh:true

Index.js

Page({

data:{

//文章数组

articleList:[],

//每页显示的行数：

pagesize:20,

//页码（从1开始）

page:1,//文章页码

//用于标识是否还有更多的状态

state:1,

//用于数组的追加和暂存

allProject:[],

*生命周期函数--监听页面初次渲染完成

onReady:function(){

varself=this;

self.getArticleList();

*获取文章列表

getArticleList()

varself=this;

//请求后台接口获取文章列表

wx.request({

//请求连接

url:'https://guanchao.site/index/xxxx/xxxxx,

//请求所需要的的参数

data:{

'page':self.data.page

success(result){

varresData=result.data;

varresLength=result.data.length;

//如果搜出来的结果1就说明后面已经没数据可加载了，所以将state设为0

if(resLength1)

self.setData({

state:0

else

varstate1=1;

//如果有数据，但小于每次期望加载的数据量（pagesize）,将state设为0，表示后面已没有数据可加载

if(resLengthself.pagesize)

varstate1=0;

//循环将结果集追加到数组后面

for(vari=0;iresLength;i++){

self.data.allProject.push(resData[i]);

self.setData({

articleList:self.data.allProject,

state:state1

wx.hideLoading();

*下拉刷新

onPullDownRefresh(){

//下拉刷新

varself=this;

wx.showLoading({

title:'加载中...',

//页码重新设置回1

self.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(){

varself=this;

self.getArticleList();

*获取文章列表

getArticleList()

varself=this;

//请求后台接口获取文章列表

wx.request({

//请求连接

url:'https://guanchao.site/index/xxxx/xxxxx,

//请求所需要的的参数

data:{

'page':self.data.page

success(result){

varresData=result.data;

varresLength=result.data.length;

//如果搜出来的结果1就说明后面已经没数据可加载了，所以将state设为0

if(resLength1)

self.setData({

state:0

else

varstate1=1;

//如果有数据，但小于每次期望加载的数据量（pagesize）,将state设为0，表示后面已没有数据可加载

if(resLengthself.pagesize)

varstate1=0;

//循环将结果集追加到数组后面

for(vari=0;iresLength;i++){

self.data.allProject.push(resData[i]);

self.setData({

articleList:self.data.allProject,

state:state1

wx.hideLoading();

*页面上拉触底事件的处理函数

onReachBottom:function(){

varself=this;

varstate=self.data.state;

if(state0){

//wx.showLoading({

//title:'加载中...',

//});

self