小程序无限加载

2018-01-04 14:37:04 浏览数 (1)

小程序无限加载

什么是无限加载呢?

比如 刷朋友圈的时候,一直往下拉一直都会有内容 就像没有尽头一样,可以不断的加载出东西来,也可以叫滚动加载。数据不可能在打开朋友圈的时候一下全部加载出来,而是往下拉的时候不断地出来的。

思路:

小程序的页面滚动到底部的时候,会触发一个onReachBottom方法,在这个方法里我们可以去实现加载下一页内容项目的功能。页面加载(onLoad)以后,向服务端请求得到第一页要显示的内容项目,通常在得到的响应里面,服务端会包含一些额外的信息,比如请求的列表一共有多少个项目,当前给我们的是哪些,当前的页码是什么,列表分成了多少页等等。利用这些信息,结合onReachBottom就可以实现无限加载功能了。

可以在小程序页面的数据(data)里面记录一下分页的状态,比如当前页(currentPage)每次滚动到页面底部的时候,就重新设置一下currentPage的值,让它加上 1 ,然后去载入下一页的内容,得到数据以后放在当前页面的列表数据里面,重新设置页面的数据会触发页面重新渲染。

页面上的数据:

在onLoad中把要展示在页面中的数据(entities)从后台请求到,请求的时候带上当前的页码(index)

is_end也是后台返回的数据 如果是最后一条就是true 反之false

页面滚动到底会触发执行onReachBottom,在页面上添加一个这样的方法,执行它的时候让它去请求列表里面的下一页内容,再把得到的内容合并到页面数据里面的列表数据里。

每次加载几条可以后台设置.

遗留问题:

app.json 中的这一项以为需要配置 但是试了写上和不写没什么区别有知道的请留言 还有如果有更好的办法做无限加载 tell me ,thanks

0 人点赞