【小程序】微信小程序使用腾讯云IM（三）：历史消息展示 - 好文

类似微信聊天向上滚动逐渐显示历史消息功能
1.第一步：得到历史消息。

得到历史消息在值钱的博客里写着有，就不再写一次了。这里我可以写一下聊天界面。就类似于微信或者QQ聊天的这种大众化审美的样式。

左边是本人，右边是对方。
聊天界面样式代码下载 <https://download.csdn.net/download/ysq0317/10568955>

进入正题

当我获取了当前的10条消息后，将消息setData进当前页数据。然后将能够获得下次聊天记录的两个重要数据存在storage里面：
wx.setStorageSync('lastMsgTime', resp.LastMsgTime); wx.setStorageSync('msgKey'
, resp.MsgKey);
页面显示我是用 <scroll-view></scroll-view> 这个组件写的。这个组件有一个属性叫锚点 scroll-into-view
。就比如我最开始获取消息的时候，能够得到10条消息。然后将锚点设置为chat9
(因为数据从0开始，切锚点前缀必须为字母）。这样的话，一进页面就会自动滑到最后一条消息。为了顺滑我们还可以用上组件的另一个属性：
scroll-with-animation；

scroll-view有一个属性，滑动到顶部触发方法：bindscrolltoupper
。我们就需要在滑动到顶部时，再一次调用得到历史消息这个方法。然后将新得到的那以前的10条消息放在另一个方法内，unshift进去。（因为是历史消息嘛，必须在数组头部）。
在unshift之前，需要把10条消息调转个顺序。也就是array.reverse;
然后再一个一个的解析。
然后重点来啦！！！！
currentMsgsArray.unshift(currentMsg);//将每一条数据unshift到聊天记录头部。
//第一次刷新历史记录currentPage为1，刷新一次就+1 var infactLength = (that.data.currentPage - 1)
*10 + that.data.currentMsgCount; //然后判断 if (currentMsgsArray.length ==
infactLength) {var num = infactLength - (that.data.currentPage - 1) * 10
//话说必须在unshift完以后，在将数据setdata。不然聊天界面会滚动了。哈哈，我当时研究了好久 that.setData({
currentMsgsArray: currentMsgsArray, toview:'chat' + num }); }
大概就是这么写了。
或许也有些不足，没怎么多研究，有错的地方可以指出来哈。

热门工具换一换