分页加载功能应该是经常遇到的，应用场景很多，比如微博、QQ、微信朋友圈、新闻应用，都有分页加载功能，不仅节省了我们用户的流量，也提升了用户体验。所以今天的文章就是介绍如何在微信小程序中实现页面加载功能。像往常一样，先上传源代码和渲染图。

源代码门户

music.gif

要实现这个功能，一般需要加上当前请求的页数和页面大小(每页显示的数量)。有些接口还通过请求的开始偏移量和结束偏移量来请求数据。例如，如果您在一页上显示10条数据，则第一个请求(第一页)从0开始，到9结束，第二页从10到19开始，以此类推。

既然要实现分页加载功能，最重要的就是处理下拉和上拉的事件。上拉和下拉的触发事件已经在微信小程序中为我们打包好了，如下

/* * *页面相关事件处理功能——倾听用户的下拉动作*/onpulldown refresh : function(){ }，/* * *页面上拉底部事件的处理功能*/onrecht button 3360 function(){ }，可能刚接触微信小程序的粉丝会遇到问题。我为什么要重写上拉和下拉函数？别担心，这是因为除了重写这两个函数之外，我们还需要将以下代码添加到json配置文件中。

{ ' enablepulldown refresh ' : true }有了上面的代码，我们每次上拉或者下拉，都会触发相应的功能。在数据中创建数据

Data : {page: 1，pageSize : 30，hasMoreData 3360 true，contentlist : []，}，page是当前数据请求的页面，pageSize是每个页面的数据大小，当hasMoreData用于上拉时是否继续请求数据，即是否有更多的数据。当我们的网络成功请求数据时，如果请求的数据长度小于pageSize: 30，那么就意味着没有更多的数据，将hasMoreData改为false如果请求的数据长度为30，则意味着有更多的数据，那么hasMoreData将长时间更改为true，页码将增加1。下拉时，先说那一页改成1。然后查询数据。当数据查询成功时，如果页面为1，获得的数据将直接分配给contentlist。如果页码大于1，请求的数据将被追加到contentlist。这样就可以实现分页加载的功能。

经过以上分析，我们对分页加载的实现有了清晰的认识，接下来我将介绍代码的实现。

getMusicInfo:函数（消息){ var=此var数据={ show API _ appid : ' 25158 '，show API _ sign : ' c0d 685445898438 f8c 12 ee 8 e 93 C2 ee 74 '，keyword: '我，第：页。数据。页面}网络。请求加载(' https://路由。显示API。com/213-1 '，数据、消息、函数(RES){控制台。log(RES)var contentlistem=那个。数据。内容列表if(RES . show API _ RES _ code==0){ if(the。数据。page==1){ contentlistem=[]} var内容列表=RES . show API _ RES _ body。页面豆。内容列表if(内容列表。长度。数据。页面尺寸.加载数据失败', }) }) },上面函数就是获取音乐列表信息的请求处理逻辑，该函数有一个参数消息，它是用来展示加载数据时的提示信息，例如当下拉的时候，提示信息为正在刷新数据，当上拉的时候提示正在加载更多数据。那么我们当进入页面的时候开始加载一次数据，即在装载函数，如下

onLoad:函数（选项){ //页面初始化选择为页面跳转所带来的参数定义变量那=this that.getMusicInfo('正在加载数据.') },然后上拉和下拉函数的实现如下

/** * 页面相关事件处理函数-监听用户下拉动作*/onpulldownlrefresh :函数(){这个。数据。page=1 this。getmusicinfo('正在刷新数据') }, /** * 页面上拉触底事件的处理函数*/onrechtbottom :函数(){ if(this。数据。hasmoredata){这个。getmusicinfo('加载更多数据)} else { wx.showToast({ title: '没有更多数据', }) } },