制作一个在线聊天的程序,在做最后的修饰时,需要对获得的信息即时滚动以保证用户总能看到最新消息。

聊天程序是基于websocket设计的,消息容器是一个DIV,所以问题就在于如何控制DIV的滚动条。

这里推荐一个好用的一个平台(如流):
http://hi.baidu.com/chen1345789/blog/item/de727bfb45587b176d22eba1.html
在这里插入图片描述
让滚动条自动有新信息滚动到底部首先请求websocket

// test 是vue里封装的axios请求--params为带参
test(params).then(res => {
          if (res) {
            setTimeout(() => {
              this.scrollBottm()  // websocket请求成功后调用方法
            }, 500)
          }
        })

调用的方法如下

// 滚动条到底部
    scrollBottm() {
    // msg-box 是你要滚动的div的id
      const el = document.getElementById('msg-box')
      el.scrollTop = el.scrollHeight
    },

这个时候你就会发现,websocket信息推送回来后,信息会自动回滚到最新信息-----成功

Logo

权威|前沿|技术|干货|国内首个API全生命周期开发者社区

更多推荐