即时聊天逻辑思路
程序员文章站
2022-04-29 15:13:05
...
1,聊天列表向上滚动的距离
原理:
1 先获取该设备的高度并复值给滚动容器(scroll-view)的高度
2 获取滚动容器(scroll-view)中所有子元素的高度
3 判断子元素的高度是否大于滚动容器(scroll-view)的高度,如果大于就把 (子元素的高度 - 容器的高度 = 滚动的距离)
注意:由于vue采用虚拟dom,我每次生成新的消息时获取到的div的scrollHeight的值是生成新消息之前的值,所以造成每次都是最新的那条消息被隐藏掉了
scrollViewBottom(){
let that = this
// 因为vue的虚拟DOM 每次生成的新消息都是之前的,所以采用异步setTimeout
setTimeout(()=>{
let query = uni.createSelectorQuery()
query.selectAll('.height_JS').boundingClientRect()
query.select('#scrollview').boundingClientRect()
query.exec((res)=>{
that.mitemHeight = 0
res[0].forEach(rest=>{
that.mitemHeight = that.mitemHeight+rest.height
})
if(that.mitemHeight > that.scrollHeight){
that.scrollTop = that.mitemHeight-that.scrollHeight+10
}
})
},100)
},
2,表情文字转换成表情
// 处理聊天内容中带有表情的数据
_HandleEmoji(paramsObj){
return new Promise((resolve,reject)=>{
if(paramsObj.content){
let HandleEmoji = paramsObj.content.replace(/\[([^(\]|\[)]*)\]/g, (item, index) => {
for (let i = 0; i < parameter.emojiList.length; i++) {
let row = parameter.emojiList[i];
if (row.alt == item) {
//在线表情路径,图文混排必须使用网络路径,请上传一份表情到你的服务器后再替换此路径
//比如你上传服务器后,你的100.gif路径为https://www.xxx.com/emoji/100.gif 则替换onlinePath填写为https://www.xxx.com/emoji/
let onlinePath = 'https://kizent.oss-cn-shenzhen.aliyuncs.com/zhendeaini/emoji/';
let imgstr = `<img src="${onlinePath}${row.url}">`;
return imgstr;
}
}
});
resolve(HandleEmoji)
}
})
}
推荐阅读
-
android 仿微信聊天气泡效果实现思路
-
android 仿微信聊天气泡效果实现思路
-
使用WebSocket实现即时通讯(一个群聊的聊天室)
-
微信小程序websocket实现即时聊天功能
-
android即时通讯demo开源(android studio实现聊天功能)
-
android即时通讯demo开源(android studio实现聊天功能)
-
PHP+jquery+ajax实现即时聊天功能实例
-
ios 即时聊天轻松搞定
-
java ssm 后台框架平台 项目源码 websocket即时聊天发图片文字 好友群组 SSM源码
-
HTML5 WebSocket+Tomcat实现真●Web版即时聊天室(单人+多人)