上一节我们介绍了首页的数据绑定，但依然是以假数据的方式来呈现，到了这里，我们将实现动态的加载数据来呈现视图
本节重点：动态数据绑定
思路分析：
在页面中的每条动态，我们都可以视为一个对象{} , 那么页面中不可能至于一条动态，所以整个页面中，我们定义一个数组的对象，用来接收从服务器获取所有的动态数据，并且进行分配下去，这样就可以展现了。
首先我们在home.js中定义一个空的数组对象“dynamicList”
data: {
//定义空的数组对象,用来接收从服务器获取的帖子数据
dynamicList : {}
},
这里要用网络请求，所以引入“request”的公用的js文件
var requestTool = require("../../utils/request.js") ;
然后我们再定义一个获取数据的函数方法
/**
* 获取动态列表
*/
getDynamicListData:function(){
var pathUrl = "/dynamic/page";//请求的参数
var paraData = {
size: "10"//一次获取10条数据
}
var that = this;//*有回调的地方，记得这样写*为了防止指针指向错误
requestTool.getRequest(pathUrl, paraData, that.getSuccess, that.getFailed);
},
//请求成功的回调参数
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;
//这里获取到的日期为时间戳，暂时不做处理，先写死日期，后面再处理
dynamicData["postDate"] = '2019-09-23';
getList.push(dynamicData);
}
//获取数据后，再次进行数据绑定，这里的操作，会即刻刷新所有绑定了数据的view，即获取到数据后，页面上进行数据填充
this.setData({
dynamicList: getList
});
},
//请求失败的回调
getFailed:function(){
console.log("qingqiu 失败");
},
然后我们在onLoad中调用上面的getDynamicListData函数方法：
onLoad: function (options) {
//从服务器获取数据
this.getDynamicListData();
},
编译程序，发现并没有出现正确的显示情况
image.png
查找原因：
1.首先我们来看下是否网络请求成功
image.png
我们发现我们确实从服务器获取到了4条数据，
并且我们将其中一条数据打印显示：
_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
这里代表网络请求是成功的，
2.数据绑定
我们发现在js中，我们成功的绑定了“dynamicList”的数据，但是我们发现在home.wxml中，我们并没有用到此数据，
接下来我们对home.wxml进行修改：
<view class="innerContainer">
<block wx:for="{{dynamicList}}">//这里我们用for循环进行数据绑定，即请求到了多少条数据，我们就创建多少个view，并且单个地显示数据
<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>
强调说明：
在wxml中绑定的数据的名称，必须 必须 必须和js文件中的字段名称保持一致，如在js文件中的昵称字段为nick_name，那么在wxml中必须也是nick_name，那么我们根据上面请求到的数据结构和具体参数，修改下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>
接下来 我们再次编译运行
image.png
总结：
数据的绑定这块，.js中申请的数据变量和.wxml中绑定的数据变量名称必须保持一致；
下一节：为大家介绍template的使用，
网友评论