微信小程序中，平常獲取列表的分頁數(shù)據(jù)時(shí)，會(huì)把當(dāng)前頁數(shù)據(jù)和之前的數(shù)據(jù)通過concat方法做個(gè)拼接，再使用setData方法更新數(shù)據(jù)。當(dāng)數(shù)據(jù)量較大時(shí)，會(huì)超過setData單次設(shè)置量1024kb的限制，進(jìn)而導(dǎo)致頁面不渲染

解決思路：

使用二維數(shù)組，即先聲明一個(gè)空數(shù)組，列表第n頁的數(shù)據(jù)就是此數(shù)組的第n-1項(xiàng)。頁面渲染數(shù)據(jù)也要改成兩次循環(huán)
頁面效果圖：

js代碼

let indexNum = _that.data.searchData.page - 1
_that.setData({
    ['checkboxItems[' + indexNum + ']']:res.data
})

注釋：
indexNum：獲取的當(dāng)前數(shù)據(jù)是二維數(shù)組的第幾項(xiàng)(因?yàn)榉猪撌菑?開始，而數(shù)組下標(biāo)是從0開始)
checkboxItems：頁面渲染的數(shù)組
res.data：接口返回的當(dāng)前頁數(shù)據(jù)

wxml代碼

<view wx:for="{{checkboxItems}}" wx:for-item="item" wx:key="index">
    <mp-cells ext-class="cellsBox" title="">
        <mp-checkbox-group prop="checkbox" multi="{{true}}" data-index="{{index}}" bindchange="checkboxChange">
            <view class="checkBoxAll" wx:for-item="item1" wx:for="{{item}}" wx:key="item1" wx:if="{{!item1.isSelected}}">
                <mp-checkbox class="mpCheckBox" label="{{}}" value="{{item1.userId}}" checked="{{item1.checked}}">
                </mp-checkbox>
                <image src="{{item1.avatar}}" class="checkImg"></image>
                <text class="checkText">{{item1.nickname}}</text>
            </view>
        </mp-checkbox-group>
    </mp-cells>
</view>

注釋：通過兩次wx:for可以得到頁面需要展示的數(shù)據(jù)
備注:如列表需要操作數(shù)據(jù)，思路也是一樣的。比如通過上圖

data-index="{{index}}" bindchange="checkboxChange"

可以得到當(dāng)前操作的數(shù)組在二維數(shù)組的下標(biāo)，就可以通過二維數(shù)組拿到這條數(shù)據(jù)，即

console.log('checkbox發(fā)生change事件，攜帶value值為：', e,e.detail.value);
let values = e.detail.value;
let currentArr: any = this.data.checkboxItems[e.currentTarget.dataset.index];

數(shù)組處理之后，再通過下標(biāo)在二維數(shù)組中更新此條數(shù)據(jù)，而不用更新所有數(shù)據(jù)。
checkboxChange方法全代碼如下

checkboxChange: function (e:any) {
   console.log('checkbox發(fā)生change事件，攜帶value值為：', e,e.detail.value);
   let values = e.detail.value;
   let currentArr: any = this.data.checkboxItems[e.currentTarget.dataset.index];
   for (let j = 0; j < currentArr.length; j++) {
     currentArr[j].checked = false;
     for (let i = 0; i < values.length; i++) {
       if (values[i] == currentArr[j].userId) {
         currentArr[j].checked = true;
         break;
       }
     }
   }
   this.setData({
       ['checkboxItems['+ e.currentTarget.dataset.index +']']:currentArr
   })
   console.log('改變了', this.data.checkboxItems[e.currentTarget.dataset.index]);
 },

備注：此方法只能有效緩解setData數(shù)據(jù)量過大的問題，而不能百分百解決。文章來源地址http://www.zghlxwxcb.cn/news/detail-485314.html

到了這里，關(guān)于小程序setData設(shè)置數(shù)據(jù)超過1024kb頁面不渲染的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！