微信小程序wx.request請求回來的數據沒有及時顯示到頁面上

作者：SakuraLJ  原文鏈接：https://blog.csdn.net/SakuraLLj/article/details/54235118

出問題的場景

//出問題的代碼
Page({
  data: {
    swiper: {//頂部輪播
      indicatorDots:true,
      autoplay:true,
      interval:5000,
      duration:1000,
      imgUrls:[
          "http://preview.quanjing.com/top014/top-663618.jpg",
          "http://preview.quanjing.com/top019/top-747622.jpg"
      ]
    },
    matchsFirst:[//通欄上面的賽事     這部分數據是要顯示在頁面上的

    ],
    matchsSecond:[//通欄的賽事 這部分數據是要顯示在頁面上的

    ],
    matchsLast:[//通欄下面的賽事 這部分數據是要顯示在頁面上的

    ]
  }
  ....省略不相干代碼
  );
  onLoad: function () {
      var that = this;
      wx.request({
        url:app.globalData.url.api.home,
        success: function(res) {
            var matchsFirst = xxx;
            var matchsSecond= xxx;
            var matchsLast= xxx;
            //這樣直接賦值並不會把數據渲染到頁面上的    不過 0.9版本的時候這樣做是可以的   
            that.data.matchsFirst=matchsFirst;
            that.data.matchsSecond=matchsSecond;
            that.data.matchsLast=matchsLast;
        }});
 };

解決辦法

//樣這種方式賦值   坑了我一個上午   
that.setData({
  matchsFirst:matchsFirst,
  matchsSecond:matchsSecond,
  matchsLast:matchsLast
});

微信官方原文

Page.prototype.setData() 
setData 函數用於將數據從邏輯層發送到視圖層，同時改變對應的 this.data 的值。

注意：

直接修改 this.data 無效，無法改變頁面的狀態，還會造成數據不一致。 
單次設置的數據不能超過1024kB，請儘量避免一次設置過多的數據。