<!-- friend-list.wxml -->
<view class="friend-list">
<block wx:for="{{friendData}}" >
<view class="friend-item" bindtap="goToChat">
<image class="avatar" src="{{item.avatarUrl}}"></image>
<view class="info">
<view class="nickname">{{item.nickName}}</view>
<view class="last-message">{{item.content}}</view>
</view>
<view class="time">{{item.createTime}}</view> <!-- 新增时间显示 -->
</view>
</block>
</view>
// pages/friends/friends.js
Page({
/**
* 页面的初始数据
*/
data: {
friendData: [],
targetIds: [],//和我有过联系的用户id!
//用户的 相关数据
chatData:[],//
lastMessages:[]
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
let that = this;
let userId = wx.getStorageSync('userInfo').id;
wx.request({
url: 'http://localhost:8080/user/targerIds?id=' + userId,
method: 'GET',
success: function (res) {
that.setData({
targetIds: res.data
});
var ids = res.data;
var queryString = 'ids=' + ids.join(',');
wx.request({
url: 'http://localhost:8080/user/aboutUser?' + queryString,
method: 'GET',
success: function (res) {
that.setData({
friendData: res.data
});
console.log("***************")
console.log(that.data.friendData)
console.log("***************")
// 循环发起请求获取消息数据
for (let i = 0; i < that.data.targetIds.length; i++) {
let targetUserId = that.data.targetIds[i];
wx.request({
url: 'http://localhost:8081/getMessage?userId=' + userId + '&targetUserId=' + targetUserId,
method: 'GET',
dataType: "json",
success: function (res) {
let temp = res.data[res.data.length - 1];
console.log(temp);
// 寻找friendData中匹配的id并拼接数据
for (let j = 0; j < that.data.friendData.length; j++) {
if (that.data.friendData[j].id === temp.userId || that.data.friendData[j].id === temp.targetUserId) {
// 拼接数据
that.data.friendData[j].createTime = temp.createTime;
that.data.friendData[j].content = temp.content;
console.log("+++++++++++++++++++++++++")
console.log( that.data.friendData[j])
console.log("+++++++++++++++++++++++++")
}
}
}
});
}
console.log( that.data.friendData )
},
fail: function (error) {
console.error(error);
}
});
},
fail: function (error) {
console.error(error);
}
});
},
goToChat: function (e) {
var index = e.currentTarget.dataset.index;
wx.navigateTo({
url: '/pages/chat/chat?friend=' + JSON.stringify(this.data.friendData[index])
});
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})
在你的代码中,你在请求消息数据的回调函数中更新了 friendData
数组的元素,但由于 JavaScript 的异步特性,这些更新操作可能在 UI 渲染之前就已经完成,因此 UI 并不会立即反映这些更新。这可能导致 item.createTime
和 {{item.content}}
无法正确显示。
为了解决这个问题,你可以在更新 friendData
数组后手动调用 setData
方法来通知页面数据已经改变,需要重新渲染。你可以将 setData
方法添加到循环外部的回调函数中,以确保所有数据都已经更新后再重新设置页面数据,例如:
wx.request({
// ... 其他配置
success: function (res) {
// ... 其他操作
for (let j = 0; j < that.data.friendData.length; j++) {
if (that.data.friendData[j].id === temp.userId || that.data.friendData[j].id === temp.targetUserId) {
// 拼接数据
that.data.friendData[j].createTime = temp.createTime;
that.data.friendData[j].content = temp.content;
console.log("+++++++++++++++++++++++++")
console.log(that.data.friendData[j])
console.log("+++++++++++++++++++++++++")
}
}
// 更新页面数据
that.setData({
friendData: that.data.friendData
});
}
});