在使用Towify制作小程序时，如何在小程序里实现分页查询？

想要在小程序里实现分页查询，只需配置滚动分页查询图片即可。

效果展示：

通过打开分页开关，同时配置触发器行为是滚动到底部的触发器。实现上滑滚动到底部时，继续加载分页内容。

创建数据表

注意：在数据中心你可以创建属于自己应用程序的数据表格，数据表格类型分为用户表，商品表、订单表和自定义表。

点击数据中心

创建数据表并初始化数据

创建事件

注意：事件是构建数据与界面元素组件链接的抽象逻辑。数据表与界面元素组件通过事件连接。

点击事件中心

创建查询事件

触发器配置

注意：在检查器面板中的触发器设置面板创建触发器，可以对组件进行交互逻辑设置，或配合事件来进行动态数据 *** 作。

选中流式布局组件

点击检查面板的触发器

创建触发器

创建滚到到底部的触发器

绑定数据

注意：绑定数据可以将事件返回的数据和组件显示内容进行绑定。

选中List Item

点击检查面板的数据绑定与设置

绑定数据

这样就可以在小程序里实现分页查询了。

一般来说，小程序下拉加载数据，用合并数组的方式（concat）然后再setData新的数组，这种方式只是试用数据量小的时候，为什么这么说，因为小程序的setData有一个限制，每次setData数据不能超过1024kb，大家可以想象一下，如果用concat合并产生新数组，并保存新数组为下一次加载的原数组，那么数量大的时候肯定会出现数据的大小超过1024KB的限制，那么这种问题该怎么解决呢，说解决方法的时候先了解下小程序渲染的过程

这可以这样理解小程序已经把数据和视图绑定了起来，众所周知vue是数据双向绑定的，数据改变，视图也会相应的改变，而上面的那段话是不是可以理解为小程序也是双向绑定的，

在vue里修改数据可以写 this.a = b

小程序里修改数据需要  this.setData({"key":value})

那我们是不是可以这样理解在小程序修改数据的时候只是调用setData方法修改了定义中的变量，

跟vue中this.a = b 是一样的性质而只是写法不一样

明白了，这一点，说解决方法。。。

上面说了数据量大的时候不能用concat的原因，那我们这时候该怎么解决，只是我们可以想，既然数据和视图绑定在一起了，我们是不是可以用一个二维数组解决这个问题

大概思路是这样的

1，在data里定义一个空数组，

2，获取下拉数据

3，把获取的数组，this.setData上面定义的数组

例如this.setData({

    [`arr[${b}]`]:res.data

})

这样就避免了setData数据过大而不报错的问题。

这时候数组发生了改变视图也会相应的改变，不过这样可能会出现一个问题，如果加载数据过多的时候视图会出现渲染层失败，

1，数据的添加

在获取到表单的数据后，自己组装一个对象，然后通过push()的方法添加一条数据，注意push的数据的index是+1的，也就是说原本数组中index依次为0，1，2，新增加的就是3，依次类推。

如果想在前面插入数据，就要用到数组合并的 *** 作了，concat()方法可以选择合并到前面或者后面例如newarray.concat(notes)。

2，数据的删除

小程序里面貌似没有remove的方法，所以删除我选择的是split方法，这也是遇到的一个坑。notes.splice(id,i)就可以从index为id的位置开始，删除i个元素，这点大家都懂，看代码就明白，不再赘述

3，数据的修改

notes = obj可以把数组中index为i的元素设置为obj。

最后，如果要在修改数据的同时渲染到页面，一定要记得使用setData方法。

this.setData({ notes:notes

})

---