Vue 实现下拉加载更多如何阻止滚动条自动移动至顶部

做项目的时候遇到的这个问题,解决了下拉加载更多之后,加载虽成功,但是加载出来的消息直接撑开了容器,导致直接在容器内显示出了加载出来的消息,且滚动条在顶部,无法继续滚动。
如何修改使其加载后的历史消息溢出容器,且滚动条保持在加载前那条消息的位置?(即 QQ 类似的加载效果)
相关代码如下:

<el-main
  @scroll.native="handleScroll"
  class="message-box__msg-list"
  v-loading="loading"
>
  <transition
    enter-active-class="animated fadeInDown"
    leave-active-class="animated fadeOutUp"
  >
    <div
      element-loading-spinner="el-icon-loading"
      element-loading-text="加载历史消息……"
      ref="loadMoreMsg"
      style="height: 64px;"
      v-loading="loadMoreMsg"
      v-show="loadMoreMsg"
    ></div>
  </transition>
  <div
    :class="['message-box__msg-pop', { 'is-right': item.sendBy }]"
    :key="index"
    v-for="(item, index) of messageRecord"
  >
    <el-avatar
      :src="item.sendBy ? userInfo.imgUrl : selectedPerson.imgUrl"
      style="flex-shrink: 0;"
    ></el-avatar>
    <div
      :class="['base-pop', { 'left-pop': !item.sendBy, 'right-pop': item.sendBy }]"
    >{{ item.msg }}</div>
  </div>
  <div ref="msgIntoView"></div>
</el-main>
// 处理滚动
handleScroll(el) {
  const top = el.target.scrollTop
  const height = el.target.scrollHeight
  if (top === 0 && this.msgListSize <= this.msgListTotal) {
    this.loadMoreMsg = true
    this.msgListSize += 10
    this.getMsgRecord().then(err => {
      this.loadMoreMsg = false
      const newHeight = el.target.scrollHeight
      this.$refs.loadMoreMsg.scrollTo(0, newHeight - height)
      if (err) {
        this.$message.error('获取聊天记录失败,请检查网络是否正常')
      }
    })
  }
},

加载后的历史消息不自动显示在容器中,而是等待用户滚动至容器中。

阅读 7.5k
3 个回答

顶一下,别沉了。

element不是有现成的无限滚动吗

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题