小程序 动态添加数据并显示

1.通过后台接口获取数据遍历展示

<view class='comment_content' wx:for='{{comment}}' wx:for-item='item'>

<view class='comment_user'>

<image src='{{item.user_photo}}'></image>

<view>{{item.user_nick}}</view>

</view>

<view class='comment_info'>{{item.content}}</view>

<view class='get_comment'>

<view class='get_comment_info' catchtap='changeimg' data-index='{{index}}'>

<image src='./zan2@2x.png' class='zan' wx:if="{{item.like_status==1}}"></image>

<image src='./zan@2x.png' class='zan' wx:else></image>

<view>{{item.like_count}}</view>

</view>

</view>

</view>

2.发表评论

<view class='to_talk' wx:if='{{talk}}'>

<view class='take_star' wx:if="{{second_p}}">

<view>星级评价：</view>

<star key='{{num}}' is_click='{{is_click}}' bindincrement='incrementTotal'></star>

</view>

<view class='take_feel'>

<textarea class='input_feel' bindinput="bindTextAreaBlur" placeholder="请分享一下你的感受" value='{{feel}}'></textarea>

<button class='isok' catchtap='talk_feel'>确认</button>

</view>

</view>

3，将评论通过接口传向数据库，并在页面展示

在回调函数success中，定义一个对象添加进comment进行展示

console.log('添加成功');

let id = res.data.data;

let newComment = {

content: that.data.feel,

id: id,

like_count: 0,

like_status: 0,

sec_comm_count: '',

user_nick: userInfo.user_nick,

user_photo: userInfo.user_photo,

second: [],

};

console.log(newComment)

 //在这里要注意arr1的初始值是‘that.data.comment’，不能为空

let arr1 = that.data.comment;

arr1.unshift(newComment);

that.setData({

comment: arr1

})