一.背景
IM即时通讯，通过MQTT发送和接收消息
二.场景
- 首次进入聊天界面时，滑动到最底部
- 下拉加载历史数据，滚动到新获得数据的下一条，即无缝衔接新数据
- 下拉到没有更多数据时，禁止再触发下拉加载
- 点击头像查看个人信息后返回时，不触发滚动
- 点击查看未阅读消息时，滚动到指定消息位置（后续集成）
- 渲染性能问题：目前看ios渲染时会闪屏，下拉触发有点过于敏感
三.实现
思路
定义消息体数组，定义滚动控制对象，动态改变滚动控制对象来控制如何滚动
提示
不要过于关心实现的过程，比如我是用mp-vue的脚手架，所以在store里保存这些值，在service里连接MQTT并在on-message里commit，最后在页面的computed获取，所以基本是按照VUE的方式在开发
//有的属性用不到，会在备注里面写删除
<scroll-view
scroll-y
upper-threshold="50"
@scrolltoupper="upper"
class="scroll-style"
:scroll-with-animation="true"//指定滚动到某个位置的动画，暂不集成滚动到某个未读的消息（请删除）
:scroll-into-view="messageScrollerControll.scrollIntoView ? messageScrollerControll.scrollerToBottom ? 'm'+ messages.length : 'm16' : '' ">
<div class="message"
:class="[item.classType == 'self' ? 'message-self' : 'message-other']"
v-for="(item, index) in messages"
:id="'m'+(index+1)"//用于指定滚动到的id，不能使用纯数字
:key="index">
</div>
</scroll-view>
最近比较忙，后面再写
