258资源分享网

我们是一个新闻流的项目，用户可以无限下拉加载数据，内部会使用一个数组将列表的数据存储起来。当我美滋滋的使用 tinajs 重构完项目后准备试试的时候，我就发现，当我加载数据超过一定数量限制（大概200条数据）之后，控制台就会报“输出传输长度超过最大长度”的错误。

最后查了一下发现是小程序为了性能限制了一次渲染传输的数据量大小。最开始我以为是我的数据超过限制了，所以采取了精简不必要字段的办法将数据体积减小。不过在我缩减到不能再缩减的时候，发现依旧没什么卵用。后来就想到我的数据真的有这么大么，于是乎拿之前原生的测试了一下，发现刷到七百多条数据的时候也会提示这个错误。那么就可以证明我之前两百条数据的时候没有超过限制，同时我将数据 JSON 化并保存到本地文件里查看了一下，发现才150KB左右，远远没有达到上限。

最后经过我和 tinajs 作者的逐一分析，发现可能是自定义组件的锅。因为我的列表元素有不同的样式，所以我使用了自定义组件去定义了不同的样式类型组件，部分组件又有公共的部分所以又要抽离出来变成组件，也就是说实际上我的列表是由一个多层嵌套的自定义组件循环渲染而成的。我们猜测最后小程序渲染的时候，每一个自定义组件传入的数据都会做一次拷贝，这样就导致了我本来 150K 的数据，瞬间就超过了它们的限制。

我们的小程序有一个下拉刷新的功能，小程序自己官方是有封装 onPullDownRefresh 接口来帮助我们完成这个事。不过因为我们的下拉刷新是有自定义样式的，所以就没办法使用官方的接口了。最后做出来的效果大概如下所示：

最开始我是使用了 <scroll-view> 组件来做滚动，同时使用 scrolltoupper 来触发下拉的事件。内部则是使用了 translate 操作来展开下拉卡片。一顿操作之后觉得甚是完美，但是之后突然发现官方提示：

请勿在 scroll-view 中使用 textarea 、 map 、 canvas 、 video 组件

因为这几个组件都是使用 Native 实现的，只能是固定在屏幕上的存在，所以没办法在 scroll-view 中使用。因为之后可能会在里面加入视频的数据，所以对这个组件就有点望而却步。同时使用了这个组件之后，外部的其它组件想要修改 scrllTop 的话会变得很麻烦，都需要自维护一套事件，增加了业务的复杂度。