闲暇时间,介绍一下我做一个聊天窗口的心得。如图:
首先要考虑的是得判断出是自己的信息还是对方发来的信息,给出如图的布局,切换不同的类。
或许你会看得一脸懵,根据接口拿到的信息,username就是当前与你聊天的这个人,如果与send_from_id一致那么就是对方的信息,反之是你自己发的信息。
接下来就是输入框了,定位在底部,因为没有发送按钮,所以必须触发键盘和手机的Enter键,还有一个问题是,在我手机Enter键显示的是'换行'字眼。
以下是解决办法,加了form标签,但必须关掉action的功能。“换行”就变成“前往”
接下来我用到了Mint-ui的Loadmore 顶部下拉刷新加载更多消息
http://mint-ui.github.io/docs/#/zh-cn2/loadmore
接口数据,如图:
在 loadTop()函数加载更多中,不能再用push()。
如下这3张图可能形象一点,created(),获取到第一页数据
第一页数据:
第二页数据:
首先得让第二页最底下的数据先添加进来,用了for循环 for(let j = sayLists.length-1; j >-1; j--) 数组序号index从0开始,
然后数据就需要使用unshift() 方法向数组的开头添加元素,于是用了下面方法:
最后的问题是,页面进来显示最新聊天,在body底部。
加上定时器,是因为页面一进来未能获取到盒子高度并发生滚动,所以加了定时器,利用count++,延迟点。