解决小程序更新对象或数组时的1024kB限制

347 阅读2分钟

 先上个图片 看下 开发者工具上的报错吧! 


这个在小程序 开发文档 上有说明只是我之前开发者工具不报这个错,现在报这个错误了,试了下安卓手机没事,但是在苹果手机上刷不出来,不更新超限的数据对象了。

废话不多说上代码吧!

<!-- demo.wxml -->
<block wx:for="{{list}}" wx:key="index">
    <view>{{item.title}}</view>
    <view class="n-line_">{{item.content}}</view>
</block>

/*demo.wxss*/
.n-line_{
  /* 行距与人生都要有点高度 */
  line-height: 1.5;
  /* 有限的行数 给你无限的可能*/
  -webkit-line-clamp: 2;
  overflow: hidden;
  display: -webkit-box;
  text-overflow:ellipsis;
  -webkit-box-orient: vertical;
}

// demo.js
const app = getApp()
Page({
    /**
     * 页面的初始数据
     * */
    data: {
        /**
         * list 数据列表
         */
        list: [],

        /**
         * pages 提交给后台的分页对象
         * page 第几页 
         * size 每页条数
         * hasMore 是否还有更多数据
         **/
        pages: {
            page: 1,
            size: 10,
            hasMore: true,
        },
        /**
         * 假数据
         */
        title: 1,
        content: `这里写假数据的文字要多多多`,
    },

    /**
     * 生命周期函数
     * onLoad 页面加载时触发
     * */
    onLoad(options) {
        this.ajax()
    },
    /**
     * 监听用户上拉触底事件
     */
    onReachBottom() {
        /**
         * 如果还有数据就 继续请求
         */
        if (this.data.pages.hasMore) {
            this.ajax()
        } else {
            console.log('没有更多了')
        }
    },
    /**
     * 假设后台数据
     */
    ajax() {
        /**
         * data 数据
         */

        let data = []
        for (let i = 0; i < this.data.pages.size; i++) {
            data.push({
                title: this.data.title++,
                content: `《第${this.data.pages.page}页,
                          每页${this.data.pages.size}条,
                          这是本页第${i+1}条》,content字段文字
                          ${
                            this.data.content.length<5000?
                            '<少了点>加多点吧!':
                            '有'+this.data.content.length+'个字'
                          };
                          ${this.data.content}`
            })
        }

        // 这是会报错的哦!可能我vue 写多了 习惯这样写了 O(∩_∩)O哈!       
        // this.data.list.push(...data)
        // this.setData({
        //     list: this.data.list
        // })


        /*重点在这*/
        /*重点在这*/
        /*重点在这*/
        /**
        * len 当前数据列表的长度 一会往它后面插新数据
        * key 要更新的 key 注意这里 变量 要用 [] 包起来
        */

        let len = this.data.list.length
        for (let i = 0; i < data.length; i++) {
            let key = 'list[' + Number(i + len) + ']'
            this.setData({
                [key]: data[i]
            })
        }

        /**
        * 如果只有9999那么多页那就 false 没有了
        */
        if (this.data.pages.page > 9999) {
            this.data.pages.hasMore = false
        } else {
          /**
          * 页数 ++ 
          * 以前我喜欢把要更新数据的都写到 this.setData({}) 里
          * 现在不了 不了 不了
          * 因为不是页面数据不需要重新渲染啊
          */
            this.data.pages.page++
        }
        console.log(this.data.pages.page)
        data=null
    }
})

我要说的都在代码里了!

想想 不如把它 封装成个 方法吧!方便调用!

看好你哦!