微信小程序> 微信历史,小程序微信小程序使用腾讯云IM三:历史消息展示

微信历史,小程序微信小程序使用腾讯云IM三:历史消息展示

浏览量:960 时间: 来源:萌村村花杨小花
类似微信聊天向上滚动逐渐显示历史消息功能1.第一步:得到历史消息。得到历史消息在值钱的博客里写着有,就不再写一次了。这里我可以写一下聊天界面。就类似于微信或者QQ聊天的这种大众化审美的样式。
左边是本人,右边是对方。
进入正题当我获取了当前的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,刷新一次就+1varinfactLength=(that.data.currentPage-1)10+that.data.currentMsgCount;//然后判断if(currentMsgsArray.length==infactLength){varnum=infactLength-(that.data.currentPage-1)10//话说必须在unshift完以后,在将数据setdata。不然聊天界面会滚动了。哈哈,我当时研究了好久that.setData({currentMsgsArray:currentMsgsArray,toview:'chat'+num});}大概就是这么写了。或许也有些不足,没怎么多研究,有错的地方可以指出来哈。

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎