当前位置:   article > 正文

微信小程序渲染有问题

微信小程序渲染有问题

  1. <!-- friend-list.wxml -->
  2. <view class="friend-list">
  3. <block wx:for="{{friendData}}" >
  4. <view class="friend-item" bindtap="goToChat">
  5. <image class="avatar" src="{{item.avatarUrl}}"></image>
  6. <view class="info">
  7. <view class="nickname">{{item.nickName}}</view>
  8. <view class="last-message">{{item.content}}</view>
  9. </view>
  10. <view class="time">{{item.createTime}}</view> <!-- 新增时间显示 -->
  11. </view>
  12. </block>
  13. </view>
  14. // pages/friends/friends.js
  15. Page({
  16. /**
  17. * 页面的初始数据
  18. */
  19. data: {
  20. friendData: [],
  21. targetIds: [],//和我有过联系的用户id!
  22. //用户的 相关数据
  23. chatData:[],//
  24. lastMessages:[]
  25. },
  26. /**
  27. * 生命周期函数--监听页面加载
  28. */
  29. onLoad(options) {
  30. let that = this;
  31. let userId = wx.getStorageSync('userInfo').id;
  32. wx.request({
  33. url: 'http://localhost:8080/user/targerIds?id=' + userId,
  34. method: 'GET',
  35. success: function (res) {
  36. that.setData({
  37. targetIds: res.data
  38. });
  39. var ids = res.data;
  40. var queryString = 'ids=' + ids.join(',');
  41. wx.request({
  42. url: 'http://localhost:8080/user/aboutUser?' + queryString,
  43. method: 'GET',
  44. success: function (res) {
  45. that.setData({
  46. friendData: res.data
  47. });
  48. console.log("***************")
  49. console.log(that.data.friendData)
  50. console.log("***************")
  51. // 循环发起请求获取消息数据
  52. for (let i = 0; i < that.data.targetIds.length; i++) {
  53. let targetUserId = that.data.targetIds[i];
  54. wx.request({
  55. url: 'http://localhost:8081/getMessage?userId=' + userId + '&targetUserId=' + targetUserId,
  56. method: 'GET',
  57. dataType: "json",
  58. success: function (res) {
  59. let temp = res.data[res.data.length - 1];
  60. console.log(temp);
  61. // 寻找friendData中匹配的id并拼接数据
  62. for (let j = 0; j < that.data.friendData.length; j++) {
  63. if (that.data.friendData[j].id === temp.userId || that.data.friendData[j].id === temp.targetUserId) {
  64. // 拼接数据
  65. that.data.friendData[j].createTime = temp.createTime;
  66. that.data.friendData[j].content = temp.content;
  67. console.log("+++++++++++++++++++++++++")
  68. console.log( that.data.friendData[j])
  69. console.log("+++++++++++++++++++++++++")
  70. }
  71. }
  72. }
  73. });
  74. }
  75. console.log( that.data.friendData )
  76. },
  77. fail: function (error) {
  78. console.error(error);
  79. }
  80. });
  81. },
  82. fail: function (error) {
  83. console.error(error);
  84. }
  85. });
  86. },
  87. goToChat: function (e) {
  88. var index = e.currentTarget.dataset.index;
  89. wx.navigateTo({
  90. url: '/pages/chat/chat?friend=' + JSON.stringify(this.data.friendData[index])
  91. });
  92. },
  93. /**
  94. * 生命周期函数--监听页面初次渲染完成
  95. */
  96. onReady() {
  97. },
  98. /**
  99. * 生命周期函数--监听页面显示
  100. */
  101. onShow() {
  102. },
  103. /**
  104. * 生命周期函数--监听页面隐藏
  105. */
  106. onHide() {
  107. },
  108. /**
  109. * 生命周期函数--监听页面卸载
  110. */
  111. onUnload() {
  112. },
  113. /**
  114. * 页面相关事件处理函数--监听用户下拉动作
  115. */
  116. onPullDownRefresh() {
  117. },
  118. /**
  119. * 页面上拉触底事件的处理函数
  120. */
  121. onReachBottom() {
  122. },
  123. /**
  124. * 用户点击右上角分享
  125. */
  126. onShareAppMessage() {
  127. }
  128. })

        在你的代码中,你在请求消息数据的回调函数中更新了 friendData 数组的元素,但由于 JavaScript 的异步特性,这些更新操作可能在 UI 渲染之前就已经完成,因此 UI 并不会立即反映这些更新。这可能导致 item.createTime{{item.content}} 无法正确显示。

为了解决这个问题,你可以在更新 friendData 数组后手动调用 setData 方法来通知页面数据已经改变,需要重新渲染。你可以将 setData 方法添加到循环外部的回调函数中,以确保所有数据都已经更新后再重新设置页面数据,例如:

 

  1. wx.request({
  2. // ... 其他配置
  3. success: function (res) {
  4. // ... 其他操作
  5. for (let j = 0; j < that.data.friendData.length; j++) {
  6. if (that.data.friendData[j].id === temp.userId || that.data.friendData[j].id === temp.targetUserId) {
  7. // 拼接数据
  8. that.data.friendData[j].createTime = temp.createTime;
  9. that.data.friendData[j].content = temp.content;
  10. console.log("+++++++++++++++++++++++++")
  11. console.log(that.data.friendData[j])
  12. console.log("+++++++++++++++++++++++++")
  13. }
  14. }
  15. // 更新页面数据
  16. that.setData({
  17. friendData: that.data.friendData
  18. });
  19. }
  20. });

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/你好赵伟/article/detail/308039
推荐阅读
相关标签
  

闽ICP备14008679号