小程序文章列表超出1024kb的解决方案兼容ios和安卓

最近开发小程序，应客户的需求，在这个小程序官方自带的深坑里摸爬滚打了很久，为的就是解决文章列表翻页加载更多数据，数据的大小超过了1024KB的解决方案。
先上图，为了实现无限翻页，小程序不会因为setData数据量过大而白屏崩溃

唯一要注意的是，此处的顶部导航栏是swiper组件，下方的文章列表不是swiper组件，因此无法实现点击顶部导航栏下方可以跟随滑动，因为很多平台都没有这样做，那是因为swiper-item会有超出数量的限制，就算后端返回的数据可以无限存放在setData内，也没有办法完整的显示出来。这是小程序官方规定的，我也是查了很久才知道有这样一个深坑。此处的效果，仅为点击顶部导航栏，下方内容进行了替换，而非点击顶部滚动后下方的列表也跟随滚动。
不墨迹，直接上代码：

以下这段代码 是解决本问题的核心代码

/**
 * @module SafeRenderUtil
 */

/**
 * 安全渲染的工具类
 * 解决的问题：分页加载时，数组拼接起来在渲染，当数据超过 1M 后，无法再加载
 * @example
 * import SafeRenderUtil from '@xxx/lib/safeRenderUtil';
 * // 初始化
 * this.SafeRenderUtil = new SafeRenderUtil({
 *   arrName: 'arrName',
 *   formatItem: (item) => {
 *     //裁剪每一项的图片...
 *     return item;
 *   },
 *   setData: this.setData.bind(this)
 * });
 * // 将数组传递进来进行渲染
 * this.SafeRenderUtil.addList(res.data.data);
 */
class SafeRenderUtil {
   
  /**
   * @param {String} opts.arrName 数组名称
   * @param {Function} opts.formatItem 处理数组的每一个 item ，并将该 item 返回
   * @param {Function} opts.setData 调用页面的渲染方法
   */
  constructor(opts) {
   
    this.arrName = opts.arrName;
    this.formatItem = opts.formatItem;
    this.setData = opts.setData;
    this.originLen = 0; //原始数组长度
  }
  /**
   * @param {Array} arr 需要渲染的数组
   */
  addList(arr) {
   
    if (arr && arr.length) {
   
      let newList = {
   };
      for (let i = 0; i < arr.length; i++) {
   
        let item = arr[i];
        if (typeof(this.formatItem) === 'function') {
   
          item = this.formatItem(item);
        }
        newList[`${
     this.arrName}[${
     this.originLen}]`] = item;
        this.originLen += 1;
      };
      this.setData(newList);
    }
  }
  /**
   * 清空数组数据
   */
  clearArr() {
   
    this.setData({
   
      [`${
     this.arrName}`]: []
    });
    this.originLen = 0;
  }
}
module.exports = SafeRenderUtil

封装了一个可以导出的类，在其内部对后端接口返回的数据 进行了处理。
具体的做法 还需要结合接口返回的数据 进行处理：
**

1.页面对应的xml代码如下：

**

<!-- tab导航栏 -->
			<scroll-view scroll-x="true" style="position: fixed;top:{
   {navHeight}}px;" class="nav" scroll-left="{
   {navScrollLeft}}" scroll-with-animation="{
   {true}}">
				<block wx:for="{
   {navData}}" wx:for-index="idx" wx:for-item="navItem" wx:key="idx">
					<view class="nav-item {
   {currentTab == idx ?'active':''}}" data-current="{
   {idx}}" data-typeid="{
   {navItem.typeId}}" bindtap="switchNav">
						<text>{
   {
   navItem.typeName}}</text>
					</view>
				</block>
			</scroll-view>
			<!-- 下方文章列表 -->
					<scrollList class="scroll-view"  style="height:{
   {tab_content}}px;box-sizing: border-box;top: {
   {navHeight + 40}}px;left: 0;position: fixed;width: 100%;" pull="{
   {pull}}" push="{
   {push}}" data-index="{
   {idx}}" listLength="{
   {clueData.length}}" bindrefresh="refresh" bindgetMore="getMore">