上一節(jié)我們介紹了首頁的數(shù)據(jù)綁定，但依然是以假數(shù)據(jù)的方式來呈現(xiàn)，到了這里，我們將實(shí)現(xiàn)動(dòng)態(tài)的加載數(shù)據(jù)來呈現(xiàn)視圖

傳送門：

本節(jié)重點(diǎn)：動(dòng)態(tài)數(shù)據(jù)綁定

思路分析：
在頁面中的每條動(dòng)態(tài)，我們都可以視為一個(gè)對象{} , 那么頁面中不可能至于一條動(dòng)態(tài)，所以整個(gè)頁面中，我們定義一個(gè)數(shù)組的對象，用來接收從服務(wù)器獲取所有的動(dòng)態(tài)數(shù)據(jù)，并且進(jìn)行分配下去，這樣就可以展現(xiàn)了。

首先我們在home.js中定義一個(gè)空的數(shù)組對象“dynamicList”

data: {
    //定義空的數(shù)組對象,用來接收從服務(wù)器獲取的帖子數(shù)據(jù)
    dynamicList : {}
  },

這里要用網(wǎng)絡(luò)請求，所以引入“request”的公用的js文件

var requestTool = require("../../utils/request.js") ;

然后我們再定義一個(gè)獲取數(shù)據(jù)的函數(shù)方法

/**
   * 獲取動(dòng)態(tài)列表
   */
  getDynamicListData:function(){
    
    var pathUrl = "/dynamic/page";//請求的參數(shù)
    var paraData = {
      size: "10"http://一次獲取10條數(shù)據(jù)
    }
    var that = this;//*有回調(diào)的地方，記得這樣寫*為了防止指針指向錯(cuò)誤
   requestTool.getRequest(pathUrl, paraData, that.getSuccess, that.getFailed);
  },

  //請求成功的回調(diào)參數(shù)
  getSuccess:function(data){
    var datas = data;
    var getList = [];
    for(var idx in data.items){
      if(idx > 9){
        break;
      }
      var obj = data.items[idx];
      var dynamicData = obj;
     //這里獲取到的日期為時(shí)間戳，暫時(shí)不做處理，先寫死日期，后面再處理
      dynamicData["postDate"] = '2019-09-23';
      getList.push(dynamicData);

    }
    //獲取數(shù)據(jù)后，再次進(jìn)行數(shù)據(jù)綁定，這里的操作，會(huì)即刻刷新所有綁定了數(shù)據(jù)的view，即獲取到數(shù)據(jù)后，頁面上進(jìn)行數(shù)據(jù)填充
    this.setData({
      dynamicList: getList
    });
  },
  //請求失敗的回調(diào)
  getFailed:function(){
    console.log("qingqiu 失敗");
  },

然后我們在onLoad中調(diào)用上面的getDynamicListData函數(shù)方法：

onLoad: function (options) {
    //從服務(wù)器獲取數(shù)據(jù)
    this.getDynamicListData();
  },

編譯程序，發(fā)現(xiàn)并沒有出現(xiàn)正確的顯示情況

image.png

查找原因：

1.首先我們來看下是否網(wǎng)絡(luò)請求成功

image.png

我們發(fā)現(xiàn)我們確實(shí)從服務(wù)器獲取到了4條數(shù)據(jù)，
并且我們將其中一條數(shù)據(jù)打印顯示：

_id :   5de0c096a4a1ef0d19767860
        
user_id :   120207
        
type    :   0
        
status  :   1
        
url :   https://dl.kuwyw.com//tmp/wx644a35bb10d6f345.o6zAJs0O18ah0HvK74PZQvQ3wdvw.KJHOj6VUv1xi249fc60c5edcc34bec139f0d35d4e6ac.png?imageView2/0/q/25|imageslim
        
text    :   人生得意須盡歡 莫使金樽空對月
        
timestamp   :   1575010454149
        
up_count    :   1
        
share_count :   0
        
view_count  :   0
        
comment_count   :   2
        
format  :   https://dl.kuwyw.com//tmp/wx644a35bb10d6f345.o6zAJs0O18ah0HvK74PZQvQ3wdvw.KJHOj6VUv1xi249fc60c5edcc34bec139f0d35d4e6ac.png
        
recommend   :   0
        
is_up   :       false
        
nick_name   :   ice
        
avatar  :   http://pso3htid6.bkt.clouddn.com/defultAvatar.jpg
        
age :   18
        
sex :   0

這里代表網(wǎng)絡(luò)請求是成功的，

2.數(shù)據(jù)綁定
我們發(fā)現(xiàn)在js中，我們成功的綁定了“dynamicList”的數(shù)據(jù)，但是我們發(fā)現(xiàn)在home.wxml中，我們并沒有用到此數(shù)據(jù)，

接下來我們對home.wxml進(jìn)行修改：

<view class="innerContainer">
  <block wx:for="{{dynamicList}}">//這里我們用for循環(huán)進(jìn)行數(shù)據(jù)綁定，即請求到了多少條數(shù)據(jù)，我們就創(chuàng)建多少個(gè)view，并且單個(gè)地顯示數(shù)據(jù)
    <view class="dynamicContainer">

      <view class="dynamicTopView">
        <image class="userAvatar" mode="aspectFill" src="{{avatar}}"></image>
        <view class="userNick-postDate">
          <text class="userNick">{{nickName}}</text>
          <text class="postDate">{{postDate}}</text>
        </view>
        <image src="/images/home/moreIcon.png" class="moreIcon"></image>
      </view>

      <text class="contentText"></text>{{content}}

      <image class="contentImg" mode="aspectFill" src="{{contentImage}}"></image>

      <view class="dynamicBottomView">
        <image class="favoriteIcon" src="/images/home/xin.png" mode="aspectFit"></image>
        <text class="favoriteCount">{{likeCount}}</text>
        <image class="commentIcon" src="/images/home/pinglun.png"></image>
        <text class="commentCount">{{commentCount}}</text>
      </view>

      <view class="bottomLine"></view>

    </view>

  </block>

強(qiáng)調(diào)說明：

在wxml中綁定的數(shù)據(jù)的名稱，必須 必須 必須和js文件中的字段名稱保持一致，如在js文件中的昵稱字段為nick_name，那么在wxml中必須也是nick_name，那么我們根據(jù)上面請求到的數(shù)據(jù)結(jié)構(gòu)和具體參數(shù)，修改下wxml中綁定的字段名

<view class="innerContainer">

 <block wx:for = "{{dynamicList}}" wx:for-item  = "dynamic">
<view class="dynamicContainer">
    <view class="dynamicTopView">

      <image class="userAvatar" src="{{dynamic.avatar}}" mode="aspectFill"></image>
      <view class="userNick-postDate">
        <text class="userNick" >{{dynamic.nick_name}}</text>
        <text class="postDate">{{dynamic.postDate}}</text>
      </view>
      <image src="/images/home/moreIcon.png" class="moreIcon" ></image>

    </view>
    <text class="contentText">{{dynamic.text}}</text>
    <image class="contentImg"  mode="aspectFill" src="{{dynamic.url}}"></image>
    <view class="dynamicBottomView">

     <image class="favoriteIcon" src="{{dynamic.is_up?'/images/home/love.png' :'/images/home/xin.png'}}" catchtap="upUserTap" mode="aspectFit"  ></image>

     

      <text class="favoriteCount">{{dynamic.up_count}}</text>
      <image class="commentIcon" src="/images/home/pinglun.png"></image>
      <text class="commentCount">{{dynamic.comment_count}}</text>
    </view>
    <view class="bottomLine"></view>


  </view>
 <block wx:for = "{{dynamicList}}" wx:for-item  = "dynamic">

</view>

接下來 我們再次編譯運(yùn)行

image.png

總結(jié)：

數(shù)據(jù)的綁定這塊，.js中申請的數(shù)據(jù)變量和.wxml中綁定的數(shù)據(jù)變量名稱必須保持一致；

下一節(jié)：為大家介紹template的使用，

傳送門：
十：動(dòng)態(tài)首頁Home的模板Template介紹和使用