![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
聊天系统
文章平均质量分 54
Boo_crob
这个作者很懒,什么都没留下…
展开
-
基于uniapp的聊天系统,在接收到消息的时候播放提示音乐
我先说我的文件结构和代码类型。应用了vuex的仓库来链接socket IO 和一些全局的方法和参数。至于vuex仓库是怎么使用的我这里就不过多的描述了。在仓库中封装socket IO,链接对话框这一部分代码,我在 聊天系统/《uniapp中使用socket IO》里面有提到过,此处略过index.js仓库↓↓import io from '@hyoga/uni-socket.io';export default new Vuex.Store({ state: { isLoad: .原创 2021-05-12 10:53:38 · 1938 阅读 · 0 评论 -
基于uniapp做的聊天系统中,使用scroll-view实现下拉加载查看消息记录
关于这个下拉加载查看消息记录,我尝试了很多方法。下面我来理理有过的想法思路1.我查找uniapp官网,找到有一个生命周期类型的方法,叫:onPullDownRefresh() ,比如一次读取10条消息记录,而我的页面只能显示五条,当我读完第十条消息想要下拉加载信息的时候,发现加载的消息会跳转至第20条消息,以至于我的消息不是紧接着我上一条读的信息,这样就给用户带来极差的体验感。思路2:想用onPullDownRefresh() 结合 跳转至指定消息下标 一起使用。比如说,我想让其每次下拉加载都跳转至第.原创 2021-05-11 18:19:35 · 6765 阅读 · 23 评论 -
基于uniapp做的聊天系统中,使用scroll-view实现动态滚动到最底部
这里提到两个方法方法一:用整个scroll-view的高度减去所有聊天内容的高度,得到的就是滚动条需要下拉的距离,即可使聊天页下拉至最底部。参考文章:《uni-app 之 聊天室滚到最底部》方法二:利用uniapp中的scroll-view组件的scroll-into-view属性 具体使用方法请参考官网文档第一种方法:将聊天框封装成组件,并判断是谁发送的信息首先要给聊天内容部分封装成一个组件(不封装也可以),将组件中的对方和自己用v-if做一个判断,当接收的用户名(或者id,只要是唯一.原创 2021-04-30 18:33:22 · 10307 阅读 · 2 评论 -
uniapp中使用socket IO
用socket io 来完成实时通信。首先 先安装socket 依赖在控制台中输入以下任意一个命令行。这里我用的第二种npm install vue-socket.io --savenpm install socket.io-client --save配置文件安装完成后创建一个仓库在默认路径下与static同级创建一个store文件夹,文件夹下有index.js。index.js中用于写各种vuex中的逻辑问题import Vue from 'vue'import Vuex fr.原创 2021-05-06 17:49:54 · 11440 阅读 · 2 评论 -
基于uniapp的聊天系统,在H5端实现按下回车键即发送消息
在uniapp框架中很少用到键盘回车键发送,但有时候也会使用。这次我的uniapp需要打包H5版本,就会用到键盘回车方便一点。1.在对应的样式标签中写一个 键盘发送 的方法confirm-type=“send” @confirm="doSend"//这里的e指的键盘事件传递的参数,text是绑定的输入框的内容doSend(e, text) { console.log(text); if (e.ctrlKey && e.keyCode === 13) { //用户点击了ctr.原创 2021-05-12 10:29:23 · 2951 阅读 · 1 评论