【小程序】微信小程序使用腾讯云IM(三):历史消息展示

类似微信聊天向上滚动逐渐显示历史消息功能
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-v

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

萌村村花杨小花

谢谢大佬!!

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值