上一節(jié)我們粗略地搭建了動(dòng)態(tài)首頁(yè)Home頁(yè)面的布局，并且以假數(shù)據(jù)的形式來(lái)呈現(xiàn)

傳送門：

本節(jié)知識(shí)重點(diǎn)：

數(shù)據(jù)綁定

上節(jié)課我們的動(dòng)態(tài)列表頁(yè)面，每條動(dòng)態(tài)顯示的內(nèi)容，還有顯示的個(gè)數(shù)，都是我們自己假定的數(shù)據(jù)，正確的填充應(yīng)該是從服務(wù)器加載數(shù)據(jù)，根據(jù)服務(wù)器返回的內(nèi)容來(lái)顯示我們每條動(dòng)態(tài)的內(nèi)容和具體的個(gè)數(shù)；那么從服務(wù)器獲得的數(shù)據(jù)又是如何加載到我們的頁(yè)面上的呢，那么這里就提出來(lái)一個(gè)“數(shù)據(jù)綁定”的概念。

數(shù)據(jù)綁定：即在布局的同時(shí)，將內(nèi)容動(dòng)態(tài)地添加到預(yù)覽的view視圖中，只要所綁定的數(shù)據(jù)發(fā)生了改變，那么其view的內(nèi)容將會(huì)發(fā)生改變；

首先我們先在home.js文件中，定義“nickName”的數(shù)據(jù)

Page({
  /**
   * 頁(yè)面的初始數(shù)據(jù)
   */
  data: {
     nickName:"張三"
  },
  /**
   * 生命周期函數(shù)--監(jiān)聽頁(yè)面加載
   */
  onLoad: function (options) {

  }, 
})

并且將“nickName”的數(shù)據(jù)綁定到名字text上，修改home.wxml文件，

修改前：

...
<text class="userNick">名字</text>//假數(shù)據(jù),直接寫死
...

修改后：

...
//讀取js文件中的nickName數(shù)據(jù)，動(dòng)態(tài)顯示
<text class="userNick">{{nickName}}</text>
...

編譯之后：

image.png

我們輕松地將數(shù)據(jù)綁定到.wxml中的view上。

以此類推，我們將所有需要?jiǎng)討B(tài)顯示的內(nèi)容，都綁定上js文件中的數(shù)據(jù)，home.js修改如下

 data: {
     nickName:"張三",
     avatar:"/images/home/avatar.png",
     postDate:"上午 19:21",
     content:"我是帖子的內(nèi)容，雖然我是寫死的,但我是從js文件中綁定顯示的",
     contentImage:"/images/home/basePic2.jpg",
     isLiked:"false",
     likeCount:"3",
     commentCount:"4"
  },

home.wxml修改如下：

<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>


</view>

編譯運(yùn)行：

image.png

總結(jié)

以上我們雖然做了數(shù)據(jù)綁定，但依然顯示的還是假數(shù)據(jù)，下一節(jié)我將從服務(wù)器請(qǐng)求數(shù)據(jù)來(lái)進(jìn)行頁(yè)面內(nèi)容填充。

傳送門：
九：動(dòng)態(tài)首頁(yè)Home的網(wǎng)絡(luò)請(qǐng)求和數(shù)據(jù)加載