微信小程序数据拼接_最佳方式实现微信小程序分页加载数据
一般小程序做分页加载数据,会做一些下拉加载更多、然后上拉刷新的操作。数据放在一个for循环里去加载,数据源是一个数组对象。在加载下一页数据时,将下一页的数据拼到当前数组后面。这样的确可以实现分页加载数据,但是如果数组中的对象都比较大,那么可能加载个几页数据,这个数组的大小就超过微信的限制了。可能会出现 VM429:1 appDataChange 数据传输长度为 1203320 已经超过最大长度 1048576 的异常。
下面分别使用普通的方式和另一种方法解决来处理数据分页加载的问题。完整项目可以在这里下载到
效果
程序运行效果
普通方式加载
增强方式加载
说明
这个项目中用来分页的数据都是请求同一段json数据,这段json的数据结构是我自己拼的,实际在应用中,可以根据自己项目需求来分页请求数据。这段数据的结构为一个data对象,data对象对应的是一个对象数组。数组中每个对象都是一篇文章的信息,嗯,就是高中语文书里都要背的那种。每页的数据是40条。一段json大小为570K。另外,这个项目是为了表现两种数据加载方式而设计的项目,并不是真实的项目。
{
"data": [{
"author": "作者",
"dynasty": "作者朝代",
"title": "文章题目",
"article": "文章的具体内容",
"useless_data": "没什么用的数据,纯粹为了增加数据长度,能更快查看到异常的抛出。",
"share_times": 0,
"like_times": 0,
"id": "0"
}]
}
数据加载页面中的功能简介
不论是普通加载还是增强加载,在页面的onLoad过程中都先调用了一个 loadInitData的方法,用来获取第一页数据。
之后点击页面底部的加载更多,可以加载下一页数据,而加载下一页数据使用的是另一个方法loadMoreData。
另外页面中还可以点击爱心来增加喜欢次数likeTap、点击分享来增加分享次数shareTap,这是模拟向服务器请求更新数据。点击作者或文章题目来查看文章的详细信息viewDetail。
普通方式分页加载数据
普通、简单的分页加载数据,是将要展示的数据放在一个数组中,通过一个for循环将数据渲染出来。在normalLoading.wxml中,普通加载的模版是这样的:
加载初始数据,推荐放在一个方法中请求,因为如果要做下拉刷新操作的话,只需要在出发下拉刷新操作后,再调用一下这个方法就可以了。
/**
* 加载初始数据,有时候为了提升页面打开速度,会将所有数据合并到一个接口中返回,然后列表中的第二页数据开始,使用其它接口返回,即分页获取数据时,仅获取下一页的数据。(这里仅做示例,因为每一页数据都取一样的。在实际开发中可以考虑这样分开。)
*/
loadInitData: function () {
var that = this
var currentPage = 0;
var tips = "加载第" + (currentPage+1) + "页";
console.log("load page " + (currentPage+1));
wx.showLoading({
title: tips,
})
// 请封装自己的网络请求接口,这里作为示例就直接使用了wx.request.
wx.request({
url: 'https://raw.githubusercontent.com/lanfeng1993/LoadDataDemo/master/data/data.json',
data: {
},
header: {
'content-type': 'application/json'
},
success: function (res) {
wx.hideLoading();
var data = res.data; // 接口相应的json数据
var articles = data.data; // 接口中的data对应了一个数组,这里取名为 articles
console.log(articles);
that.setData({
articles: articles,
currentPage: currentPage
})
}
})
},
请求下一页数据后,将本地的数组和新一页的数据拼接起来,让小程序去渲染页面。
/**
* 加载下一页数据
*/
loadMoreData: function () {
var that = this
var currentPage = that.data.currentPage; // 获取当前页码
currentPage += 1; // 加载当前页面的下一页数据
var tips = "加载第" + (currentPage+1) + "页";
console.log("load page " + (currentPage+1));
wx.showLoading({
title: tips,
})
// 请封装自己的网络请求接口,这里作为示例就直接使用了wx.request.
wx.request({
url: 'https://raw.githubusercontent.com/lanfeng1993/LoadDataDemo/master/data/data.json',
data: {
},
header: {
'content-type': 'application/json'
},
success: function (res) {
wx.hideLoading();
var data = res.data; // 接口相应的json数据
var articles = data.data; // 接口中的data对应了一个数组,这里取名为 articles
// 将新一页的数据添加到原数据后面
var originArticles = that.data.articles;
var newArticles = originArticles.concat(articles);
console.log(newArticles);
that.setData({
articles: newArticles,
currentPage: currentPage
})
}
})
},
如果项目中的列表数量是有限、且数据简单且量小的话,使用这种方式是没什么问题的。但是如果数据结构非常复杂,每个对象序列化成json后,对象很大,这种方式可能就不太适合了,数据请求过多甚至会导致小程序没有响应。
以本项目为例,数据加载到第六页,240条数据以后,再加载第七页的数据时,就会抛出VM429:1 appDataChange 数据传输长度为 1203320 已经超过最大长度 1048576的异常,因为that.setData({}})一次性set的数据太大了,导致数据无法设置。
更好的分页加载数据的方式
相对于上面的加载方式,只需要在数据存储上做一些小的改变,就能实现加载更多的数据。这个方法就是再增加一个数组,用来存放数据。上一个方法是一个数组中存放所有的数据,数据量很容易就会变大。这个方法,将每一页请求过来的数据的引用放到一个新的数组dataArray内。dataArray[0]存放第一页数据,dataArray[1]存储第二页数据。请求新一页,都只需要更新一组数据,这样set的数据就不会超过微信小程序允许的长度。这个方法首先在loadInitData时,清空dataArray,防止新数据与原数据冲突。然后将这一页数据放到dataArray[0]中即可。
loadInitData: function () {
var that = this
var currentPage = 0; // 因为数组下标是从0开始的,所以这里用了0
var tips = "加载第" + (currentPage+1) + "页";
console.log("load page " + (currentPage + 1));
wx.showLoading({
title: tips,
})
// 刷新时,清空dataArray,防止新数据与原数据冲突
that.setData({
dataArray: []
})
// 请封装自己的网络请求接口,这里作为示例就直接使用了wx.request.
wx.request({
url: 'https://raw.githubusercontent.com/lanfeng1993/LoadDataDemo/master/data/data.json',
data: {
},
header: {
'content-type': 'application/json'
},
success: function (res) {
wx.hideLoading();
var data = res.data; // 接口相应的json数据
var articles = data.data; // 接口中的data对应了一个数组,这里取名为 articles
var totalDataCount = articles.length;
// console.log(articles);
console.log("totalDataCount:"+totalDataCount);
that.setData({
["dataArray["+currentPage+"]"]: articles,
currentPage: currentPage,
totalDataCount: totalDataCount
})
}
})
},
在页面的渲染上,与上面的方法也有一些小差别,使用了2个for循环来渲染数据。
加载下一页数据时,根据这页的下标,将这页的数据放到对应下标的dataArray中。
/**
* 加载下一页数据
*/
loadMoreData: function () {
var that = this
var currentPage = that.data.currentPage; // 获取当前页码
currentPage += 1; // 加载当前页面的下一页数据
var tips = "加载第" + (currentPage + 1) + "页";
console.log("load page " + (currentPage + 1));
wx.showLoading({
title: tips,
})
// 请封装自己的网络请求接口,这里作为示例就直接使用了wx.request.
wx.request({
url: 'https://raw.githubusercontent.com/lanfeng1993/LoadDataDemo/master/data/data.json',
data: {
},
header: {
'content-type': 'application/json'
},
success: function (res) {
wx.hideLoading();
var data = res.data; // 接口相应的json数据
var articles = data.data; // 接口中的data对应了一个数组,这里取名为 articles
// 计算当前共加载了多少条数据,来证明这种方式可以加载更多数据
var totalDataCount = that.data.totalDataCount;
totalDataCount = totalDataCount + articles.length;
console.log("totalDataCount:" + totalDataCount);
// 直接将新一页的数据添加到数组里
that.setData({
["dataArray[" + currentPage + "]"]: articles,
currentPage: currentPage,
totalDataCount: totalDataCount
})
}
})
},
这种方式加载同样的数据可以加载到1400条,再往下加载会抛出另一个异常:Uncaught Dom limit exceeded, please check if there's any mistake you've made.这个问题是因为小程序在这个页面渲染的dom结构太多了,已经超过了上限,这个问题目前没有找到什么解决方法。毕竟数据也是不能被无限加载的,小程序内也没有app中列表的复用的能力。不过相对于第一种方法,只能加载240条数据来说,这种方法能加载1400条数据,也还是可以的,不过加载了1400条数据后,这个列表滚动起来也是非常卡了。
总结
虽然实际项目中数据可能不会加载这么多条数据,但是因为这里每条数据对应的对象大小实际上不算特别大,实际项目中的数据可能会更复杂,更多。这时候,为了性能和速度,可以考虑和后端同学沟通,将数据封装成一个结构简单一些的数据传输对象,不会直接展示出来的数据结构就不要在列表中直接传输过来,再结合第二种方法加载数据,应该能应对大部分情况了。
微信小程序数据拼接_最佳方式实现微信小程序分页加载数据相关推荐
- 微信小程序 实现分页加载数据
实现分页加载数据要用到页面加载触底事件 onReachBottom: function () { } 首先在 js 定义初始数据 data: { //用来接收后端数据list:[], //当前页cur ...
- 小程序下滑分页加载数据
小程序下滑分页加载数据 1. 在data定义page参数 params: {pageNum: 1,pageSize: 10,total: 0,searchValue: ''}, 2. 请求接口数据 g ...
- listView分批和分页加载数据
在Android应用程序中,有时候会向listView中加载很多数据,向listView中加载数据是一个耗时的过程,加载过多的数据用户停留在listView上,一直等待,给用户的体验特别不好,比如向服 ...
- Android GridView横向滚动,分页加载数据
转载请注明出处,谢谢http://blog.csdn.net/harryweasley/article/details/51007348 始终觉得讲ui效果要先放上效果图,要不让其他人好不容易看完了, ...
- 分组显示的ListView分页加载数据
参考: http://www.cnblogs.com/qianxudetianxia/archive/2011/06/07/2074326.html 分组的ListView的拖拽 http://w ...
- List 分页加载数据控制机制
分页加载是一种应用很广泛的数据展示控制机制,相信绝大多数开发者对于这一套机制都非常熟悉.这篇文章的主要目的结合实际的使用场景,对以往在开发中遇到一些概念进行梳理,归纳的同时加深理解,也希望能帮助更多刚 ...
- 微信小程序-如何分页加载数据
小程序通过数据库读取数据一次最多读取20条,云函数一次最多读取100条,所以如果我们要读取更多的数据就要借助分页加载,通过分次的加载数据,然后将每次获取到的数据拼接起来,就可以在页面显示更多的数据. ...
- 微信小程序实现上拉分页加载数据
文章目录 1. 实现上拉请求 2. 实现分页加载 3. 数据全部加载完成后阻止上拉刷新 4. 容易发送上拉刷新失败问题 微信小程序的上拉和下拉刷新是比较常见的功能,下拉刷新比较容易实现,这里说一下上拉 ...
- Android中ListView分页加载数据
熟悉Android的朋友们都知道,不管是微博客户端还是新闻客户端,都离不开列表组件,可以说列表组件是Android数据展现方面最重要的组件,我们今天就要讲一讲列表组件ListView加载数据的相关内容 ...
最新文章
- R语言ggplot2可视化在可视化图形的X轴标签中添加温度摄氏度符号(add temperature degree symbol on axis label)
- python心跳的实现_(python)面向对象
- tcpdump 识别成dns_dns tcpdump
- 在命令行中的vim编辑器加上行号
- SuperSocket 2.0 Preview1 发布,.NET Socket服务器框架
- JLabel鼠标停在上面显示小手图标 点击跳转到相应网页
- sort();对结构体数组的排序
- 跑步呼吸方法(细胞分裂呼吸法)
- CCF201409-5 拼图(100分)【插头DP+状态压缩】
- maven内置属性详细说明
- 94% Asset Optimization
- React Native 微博登陆
- 十六、响应式布局--媒体查询
- 计算机集成声卡输出通道,1台电脑多人用!多屏输出另类功能详解
- Thinkpad部分机型支持的智能感知功能介绍
- Pyecharts绘制图表大全——柱形图
- 负数在计算机中如何表示
- 少儿学单词软件android,推荐4款免费的自然拼读APP,孩子在家可以边玩边学!
- 好省app和高佣联盟优缺点比较,好省app提现什么时候到账 幕马图城
- MacOS Big Sur 11.0 — 苹果操作系统 开发者预览测试版