前言

写博客主要是用来总结、巩固知识点，加深自己对这个知识点的理解。同时希望能帮助到有需要的人。如有不正确的地方。可以在评论区指出。你们的支持。是我不断进步的源泉。

小程序处理列表的简单方法

在项目中遇到数据量比较大的时候都会采用分页来进行数据展示。在小程序中也不列外。我们可以可以通过 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;//上滑一次当前页+1let 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');}})
复制代码

总结

可能大家在项目中遇到的数据不会特别大。用第一种方法也没有发现不当的地方。（比如我一开始就使用的第一种方法）但总得来说在小程序中要尽量精简传输的数据字段。然后使用第二种数据处理的方法。可能会解决大部分问题。

参考资料： www.imooc.com/article/436…