#每天都是崭新的一天#再累也要照顾好自己

【JavaScript系列】vue项目中实现滚动条(具体视窗口的滚动条)操作:(1)置底,(2)置于上次停留的位置

一、前言

之前写了一个happyChat的项目,主要是想学习一下socketIO的使用。然后最近在给happyChat做前端优化和升级。发现第一版做的很low。

需要优化的问题:

1、问题1:滚动条会出现在头部和底部的视窗中,之前固定头部和固定底部是使用`position:fixed`。

解决方案:body和html禁止`overflow:hidden`,头部和底部是`position:relative`,聊天视窗使用`overflow: auto`,这样聊天视窗才会出现滚动条。滚动条不会出现在头部和底部视窗中。

2、问题2:聊天视窗一次性加载了所有的聊天内容,如果数据太多会出现超时的问题。

解决方案:聊天内容查询使用分页查询,一次性查询20条或者30条。

3、问题3:群聊的时候,找不到群成员列表。

解决方案:做一个群信息汇总的组件,包括群成员列表。

新增功能:(1)滚动条置底;(2)分页加载的时候,保持滚动条置于上次停留的位置。

项目【前端】源代码地址:https://github.com/saucxs/happy-chat-web

项目【后端】端源代码地址:https://github.com/saucxs/happy-chat-node 

欢迎fork和start。

线上地址:http://chat.chengxinsong.cn/



二、具体【视窗口】的滚动条的问题

环境:vue

我们先来看一下,给滚动条添加监听事件,必须在created或者mouted周期中,添加scroll的监听事件。

 mounted: function () {
    window.addEventListener('scroll', this.handleScroll, true);  // 监听(绑定)滚轮滚动事件
  },

其中handleScroll事件是methods里的事件:

 handleScroll() {
      this.viewBox = this.$refs.viewBox;
      console.log(this.viewBox.scrollTop, '到头部的距离-------------------')
      console.log(this.viewBox.scrollHeight, '滚动条的总高度-------------------')
    }


注意:div 到头部的距离 + 屏幕高度 = 可滚动的总高度

`this.$refs.viewBox`取到视窗口的dom对象,必须确定dom加载完毕了。

 <ul ref="viewBox">
        <li v-for="item in message">
          <ChatItem v-if="userInfo.user_id === item.from_user" :href="item.from_user" :img="item.avator" me="true" :msg="item.message" :name="item.name" :time="item.time"></ChatItem>
          <ChatItem v-else :img="item.avator" :msg="item.message" :href="item.from_user" :name="item.name" :time="item.time"></ChatItem>
        </li>
      </ul>

如果我们想置底,我们必须将【滚动条总高度】赋值给【滚动条到头部的距离】。这样就置底了。

业务是这样的:(1)当进入到聊天页面时候,这时候置底。(2)如果翻看之前的聊天记录,这时候就不需要置底,保持在当前的位置。

1、先解决【进入到聊天页面时候,这时候置底】的问题

解决方案:(1)全局设置一个标志位,如果是第一次进入,【标志位为置底】,执行置底方法。(2)如果是翻看之前聊天记录,【标志位改为不置底】,不执行置底方法。(3)监听内容变化方法,判断标志位是啥,然后看是否执行置底方法。

watch: {
    message() {
      this.viewBox = this.$refs.viewBox
      if(this.type == 'bottom'){
        this.refresh();
      }
    }
},

refresh就是一个置底方法。

refresh() {
      setTimeout(() => {
            this.viewBox.scrollTop = this.viewBox.scrollHeight
	}, 100)
},


2、如果翻看之前的聊天记录,这时候就【不需要置底,保持在当前的位置】

如果不置底,就是一直在保持在顶部。

思路:将加载之前的【数据高度】(此时滚动条的总高度)存放在临时变量beforeScrollHeight中;将数据加载之后的到【头部的距离】 = 【此时滚动条总高度】- 【临时变量beforeScrollHeight】。


看一下代码实现:

监听message值变化

watch: {
   message() {
      if(this.type == 'bottom'){
        this.refresh();
      }else{
        this.nofresh()
      }
  }
},

主要看nofresh方法

 nofresh() {
      setTimeout(() => {
        this.afterScrollHeight = this.viewBox.scrollHeight - this.beforeScrollHeight;
        this.viewBox.scrollTop = this.afterScrollHeight;
      }, 100)
},

加载更多的方法

 loadMore() {
     this.beforeScrollHeight = this.viewBox.scrollHeight;
     // 分页请求数据,包装数据。
 }

我们来看一下动态图,实现的功能


今天只把这个具体视窗口的滚动条的总结一下,其他两个问题,没有很大的意义。


感谢你的阅读,本文由 sau交流学习社区 版权所有。
如若转载,请注明出处:sau交流学习社区-power by saucxs(程新松)(/page/768.html)
交流咨询
    官方QQ群
    群号663940201,欢迎加入!
    sau交流学习社区交流群

微信群
欢迎加入微信群
微信公众号
欢迎关注微信公众号

图文推荐

微信群
saucxs聊天机器人
saucxs
hi ,欢迎来到sau交流学习社区,欢迎与我聊天,问我问题哦!
您正在使用的浏览器是,不在支持范围内!
为了您的正常使用与展示,推荐使用Chrome浏览器68以上版本
支持浏览器:
火狐浏览器最新版
Safari浏览器最新版
Edge浏览器最新版
IE浏览器10,11