赞
踩
- <!-- 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
- });
- }
- });

Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。