一.背景

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>

最近比较忙，后面再写