vue,一路走来(9)

时间:2021-02-04 19:37:11

闲暇时间,介绍一下我做一个聊天窗口的心得。如图:

vue,一路走来(9)

首先要考虑的是得判断出是自己的信息还是对方发来的信息,给出如图的布局,切换不同的类。

vue,一路走来(9)

vue,一路走来(9)

或许你会看得一脸懵,根据接口拿到的信息,username就是当前与你聊天的这个人,如果与send_from_id一致那么就是对方的信息,反之是你自己发的信息。

vue,一路走来(9)

vue,一路走来(9)

接下来就是输入框了,定位在底部,因为没有发送按钮,所以必须触发键盘和手机的Enter键,还有一个问题是,在我手机Enter键显示的是'换行'字眼。

以下是解决办法,加了form标签,但必须关掉action的功能。“换行”就变成“前往”

vue,一路走来(9)

vue,一路走来(9)

 接下来我用到了Mint-ui的Loadmore  顶部下拉刷新加载更多消息  

http://mint-ui.github.io/docs/#/zh-cn2/loadmore

接口数据,如图:

vue,一路走来(9)

在 loadTop()函数加载更多中,不能再用push()。

如下这3张图可能形象一点,created(),获取到第一页数据

vue,一路走来(9)

 第一页数据:

vue,一路走来(9)

第二页数据:

vue,一路走来(9)

首先得让第二页最底下的数据先添加进来,用了for循环 for(let j = sayLists.length-1; j >-1; j--)  数组序号index从0开始,

然后数据就需要使用unshift() 方法向数组的开头添加元素,于是用了下面方法:

vue,一路走来(9)

最后的问题是,页面进来显示最新聊天,在body底部。

vue,一路走来(9)

加上定时器,是因为页面一进来未能获取到盒子高度并发生滚动,所以加了定时器,利用count++,延迟点。