前言
写博客主要是用来总结、巩固知识点，加深自己对这个知识点的理解。同时希望能帮助到有需要的人。如有不正确的地方。可以在评论区指出。你们的支持。是我不断进步的源泉。
小程序处理列表的简单方法
在项目中遇到数据量比较大的时候都会采用分页来进行数据展示。在小程序中也不列外。我们可以可以通过 onReachBottom（页面上拉触底事件）这个方法来实现分页请求。直接看代码：
请求列表数据的方法
loadList() {
let _that = this;
App.Hq.promiseRequest({
url: url,
data: {
"Page": {
"PageSize": 20,
"PageIndex": _that.data.PageIndex
}
},
method: 'POST',
}).then((res) => {
if (res.Success) {
if(_that.data.PageIndex===1){
_that.setData({
list:res.List
})
}
//把其他也的数据通过concat方法拼接到_that.data.list中
else if(_that.data.PageIndex>1){
_that.setData({
list:_that.data.list.concat(res.List)
})
}
}
else if (res.Code === -2000) {
App.getToken(_that.loadNews);
return false;
} else {
App.Hq.tipMask('请求失败', '/static/image/tip.png');
App.getLog(16, `${res.Message}`, '用户端/evaluate页面/方法/loadNews');
}
})
页面上拉后触底加载更多页数据
// 上滑加载更多
onReachBottom: function() {
let _that = this;
//上滑一次当前页+1
let currentPage = ++_that.data.PageIndex;
//把新的当前页赋值给data对象里的PageIndex
_that.setData({
PageIndex: currentPage
})
//把当前页根据服务器端返回的总页数进行比较，如果小于或者恒等于总页数则进行数据请求否则进行提示
if (currentPage < _that.data.totalPage || currentPage === _that.data.totalPage) {
_that.loadNews();
} else {
App.Hq.afterSend();
_that.setData({
showTips: false,
})
}
}
当然上面这种方法也是可以的，并没有错。在数据量比较少的时候这种方法还是ok的，但一旦数据量大的时候，该方法就不行了，甚至会导致程序闪退。这是什么原因呢？
这里我们能把list里的数据能在界面中显示出来，主要就是靠setData这个方法把数据从逻辑层传送到界面：关于具体的详情请看官网说明
关于setData有几点要注意：
1、直接修改 this.data 而不调用 this.setData 是无法改变页面的状态的，还会造成数据不一致。
2、仅支持设置可 JSON 化的数据。
3、单次设置的数据不能超过1024kB，请尽量避免一次设置过多的数据。
4、请不要把 data 中任何一项的 value 设为 undefined ，否则这一项将不被设置并可能遗留一些潜在问题。
这里第三点提示我们通过setData设置的数据不能超过1024kb。如果按照上面的方法数据量大的时候单词给setData设置的数据超过1024kb的时候不知道会出现什么问题。有可能导致程序闪退。
在官方文档的优化建议里有这么段话：
更好的处理数据列表的方法
由此看来。上面那种方法并不是很可取：那还有其他方法吗？当然是有的了：
相对于上面的方法，我们只需要在数据存储上做一些小的改变，就能实现加载更多的数据而且不影响性能。这个方法就是再增加一个数组，用来存放数据。上一个方法中是把所有的数据都存放到一个数据中，这样数据量很容易就会变大。这个方法，将每一页请求过来的数据的引用放到一个新的数组dataArray内。dataArray[0]存放第一页数据，dataArray[1]存储第二页数据。请求新一页，都只需要更新一组数据，这样每次显示的数据就不会很大。
loadList() {
let _that = this;
App.Hq.promiseRequest({
url: url,
data: {
"Page": {
"PageSize": 20,
"PageIndex": _that.data.PageIndex
}
},
method: 'POST',
}).then((res) => {
if (res.TotalPage === 1) {
_that.setData({
showTips: false
})
}
let currentPage = _that.data.PageIndex - 1; //获取数组下标
res.List.forEach(item => {
let theDate = new Date((item.CreateTime).replace(/-/g, '/')).getTime();
item.CreateTime = App.Hq.getDateDiff(theDate, item.CreateTime);
})
_that.setData({
['list[' + currentPage + ']']: res.List,
totalPage: res.TotalPage
})
}
else if (res.Code === -2000) {
App.getToken(_that.loadNews);
return false;
} else {
App.Hq.tipMask('请求失败', '/static/image/tip.png');
App.getLog(16, `${res.Message}`, '用户端/evaluate页面/方法/loadNews');
}
})
总结
可能大家在项目中遇到的数据不会特别大。用第一种方法也没有发现不当的地方。（比如我一开始就使用的第一种方法）但总得来说在小程序中要尽量精简传输的数据字段。然后使用第二种数据处理的方法。可能会解决大部分问题。
