小程序无限加载

小程序无限加载

什么是无限加载呢?

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

思路:

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

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

页面上的数据:

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

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

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

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

遗留问题:

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

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏沈唁志

几个实用的 WordPress 代码片段

1223
来自专栏AndroidTv

读书笔记--Android Gradle权威指南(上)前言笔记

1334
来自专栏分享达人秀

安装Android模拟器,准备开发

完成以上所有步骤(JDK、ADT Bundle、SDK),那么就可以开始进行Android开发了。 Android程序必须运行在Android系...

2566
来自专栏程序员的诗和远方

tips-解决base标签造成SVG效果失效

之前写了使用SVG实现一个骚气的圆环: 一个比想象中更骚气的圆-svg实现。后来上线过程中发现渐变的效果出不来,原来是html base标签和内联SVG同时使用...

2655
来自专栏葡萄城控件技术团队

LeadTools Android 入门教学——运行第一个Android Demo

LeadTools 有很多Windows平台下的Demo,非常全面,但是目前开发手机应用的趋势也越来越明显,LeadTools也给大家提供了10个Android...

1655
来自专栏

Flex2 数据的验证方法以及如何改变错误提示的CSS

Flex2开发项目中经常需要验证用户输入,Flex2自身为我们提供丰富的组件。 下面的例子我们实现了如下一些特性: 1)数据集中验证 2)定位光标到第一个验证失...

1234
来自专栏前端人人

React第三方组件4(状态管理之Reflux的使用③TodoList中)

本教程总共5篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1、React第三方组件4(状态管理之Reflux的使用①...

3144
来自专栏守望轩

Visual Studio 2008 每日提示(二十六)

#251、在文件中保存扩展名的映射 原文链接:You can save your file extension mappings to a file 操作步骤...

3404
来自专栏pangguoming

eclipse maven 报错Could not get the value for parameter encoding for plugin execution default

问题描述:更改默认的maven仓库路径完成后、即存maven项目或者新建maven项目的时候出现如下错误 Could not get the value for...

4876
来自专栏Youngxj

[源码分享]梓熙ico获取源码美化版

1682

扫码关注云+社区