小程序setData數據量大時,導致卡頓怎麼解決

比如一個商品列表頁,用戶不斷上滑加載數據,而每次加載數據時通常都是將獲取的新數據和舊數據通過concat進行合併在一個數組內,


this.setData({
              list: this.data.list.concat(newlist)
            })

這導致數組越來越大,setData渲染時也會越來越慢。

改善方法:

this.setData({
              ['list[' + this.data.list.length + ']']: newlist
            });

這樣只是在list中多添加了一個元素,此時,list的結構是這樣的:

是一個二維數組,所以在wxml頁面循環時要多一層循環。在渲染時不會渲染整個list。

同理,假如現在商品列表有個點贊功能,對某個商品點贊後,只要知道商品在list中的下標位置就可以獲取到該商品數據,修改後再用setData渲染:

var goods = this.data.list[0][0];
goods['dianzan']+=1;

this.setData({
    ['list[0][0]']: goods
})

這樣渲染時也會很快。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章