小程序无限加载

小程序无限加载

什么是无限加载呢?

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

思路:

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

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

页面上的数据:

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

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

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

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

遗留问题:

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

本文来自企鹅号 - canaan七媒体

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏FreeBuf

WordPress曝未经授权的密码重置漏洞(CVE-2017-8295 )

漏洞提交者:Dawid Golunski 漏洞编号:CVE-2017-8295 发布日期:2017-05-03 修订版本:1.0 漏洞危害:中/高 I. 漏洞 ...

19810
来自专栏python学习之旅

Python+Selenium笔记(一):环境配置+简单的例子

#环境配置基于windows操作系统 #学习selenium要有一些HTML和xpth的基础,完全不会的建议先花点时间学点基础(不然元素定位,特别是xpth可能...

3525
来自专栏FreeBuf

鲶鱼CMS存储XSS漏洞披露

概述 Catfish(鲶鱼) CMS是一款开源的PHP内容管理系统。这个cms是十月我和学长小胡子一起审计的。所以在这里声明下,洞是他找的,他不善言辞,授权给我...

2167
来自专栏蓝天

Linux磁盘相关命令

sfdisk -l sfdisk -s fdisk -l dmesg |grep SCSI dmesg |grep -i raid df -h c...

773
来自专栏Ryan Miao

如何启动一个本地静态服务器

背景 学习前端开发,想要调试静态页面以及js,发现直接本地打开会有跨域异常。因此,需要启动一个静态服务器,只负责当前目录的文件路由。 目前尝试了两种方式。一种是...

2985
来自专栏前端小叙

微信公众号复制的图片可以正常显示的办法

通过浏览多方文章,找到了一个 非常好用但是也有很大的坑的办法: 在页面中加meta: <meta name="referrer" content="never"...

1.5K9
来自专栏阮一峰的网络日志

Babel 入门教程

(说明:本文选自我的新书《ES6 标准入门(第二版)》的第一章《ECMAScript 6简介》) Babel是一个广泛使用的转码器,可以将ES6代码转为ES5代...

2725
来自专栏同步博客

XSS跨站脚本攻击

跨站脚本(cross site script)为了避免与样式css混淆,所以简称为XSS。

1343
来自专栏Puppeteer学习

一步一步学Vue(八)

1342
来自专栏云计算教程系列

如何从Django应用程序发送Web推送通知

网络不断发展,现在可以实现以前只能在本机移动设备上使用的功能。JavaScript 服务工作者的引入为Web提供了新的功能,可以执行后台同步,脱机缓存和发送推送...

3456

扫码关注云+社区