vue scroll滚动判断的实现(是否滚动到底部、滚动方向、滚动节流、获取滚动区域dom元素)


Posted in Javascript onJune 11, 2020

1、是否滚动到底部

isScrollBottom() {
   // 是否滚动到了底部
   this.box = this.$refs.chatListWrapper
   var clientHeight = this.box.clientHeight
   var scrollTop = this.box.scrollTop
   var scrollHeight = this.box.scrollHeight
   if (scrollTop + clientHeight == scrollHeight) {
    this.$store.dispatch('setBottomBtn', false, { root: true }) // 隐藏直达最新消息按钮
    this.isBottom = true
    this.isTop = false
   } else {
    this.$store.dispatch('setBottomBtn', true, { root: true }) // 显示直达最新消息按钮
    this.isTop = false
    this.isBottom = false
    if (scrollTop == 0) {
     this.isTop = true
    }
   }
  },

2、scroll滚动方向判断

getDirection() {
   // scroll滚动方向~~~~
   this.box = this.$refs.chatListWrapper
   var scrollTop = this.box.scrollTop
   var scroll = scrollTop - this.initTop
   this.initTop = scrollTop
   let dir = 'down'
   if (scroll < 0) {
    dir = 'up'
   } else {
    dir = 'down'
   }
   return dir
  },

3、滚动节流

1)、在滚动的dom上绑定scroll事件,监听滚动

vue scroll滚动判断的实现(是否滚动到底部、滚动方向、滚动节流、获取滚动区域dom元素)

2)、data中定义:fnScroll: () => {}, 初始值
3)、mounted中给fnScroll函数赋值,_.throttle实现滚动节流

this.fnScroll = _.throttle(() => {
}, 500)

4、获取滚动可视区域内dom:

实现注意:判断当前元素是否在可视区域内,若在则存到isSeeDomArr中,然后循环isSeeDomArr数组,拿到当前可视区域内的最后一个dom,再去判断是否更新对应的咨询轨迹。
不要滚动时就去更新,这样会造成不停请求更新,最后一次请求可能无效,造成数据的错乱

sendRead() {
   const chatLi = document
    .getElementById('chat_list_wrapper')
    .getElementsByTagName('li')
   var container = this.$refs.chatListWrapper
   var swHeight = container.clientHeight
   const scrollTop = container.scrollTop
   const aa = swHeight + scrollTop
   let isSeeDomArr = []
   for (let j = 0; j < chatLi.length; j++) {
    if (scrollTop < chatLi[j].offsetTop && chatLi[j].offsetTop < aa) {
     isSeeDomArr.push(chatLi[j]) //将可视区域内所有dom存储到isSeeDomArr
    }
   }
   if (isSeeDomArr.length) {
    // 非 ceo接诊台更新消息的已读状态
    if (this.$route.path.indexOf('diagnose/ceo') === -1) {
     for (let m = 0; m < isSeeDomArr.length; m++) {
      const isSelfSend = isSeeDomArr[m].getAttribute('isSelfSend')
      const msgStatus = isSeeDomArr[m].getAttribute('msgStatus')
      const msgType = isSeeDomArr[m].getAttribute('msgType')
      if (!isSelfSend && !msgStatus && msgType !== 'notice') {
       const _id = isSeeDomArr[m].getAttribute('id')
       this.sendReadApi(_id)
      }
     }
    }
    // 更新聊天对应的咨询轨迹
    this.setCurrentFdAsk(
     isSeeDomArr[isSeeDomArr.length - 1].getAttribute('fdAsk')
    )
   }
  },

the end:滚动加载这些判断前前后后改了好多次,这次终于感觉逻辑比较清晰了,也算对自己有个交代。。。

到此这篇关于vue scroll滚动判断的实现(是否滚动到底部、滚动方向、滚动节流、获取滚动区域dom元素)的文章就介绍到这了,更多相关vue scroll滚动判断内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
简明json介绍
Sep 28 Javascript
javascript原型链继承用法实例分析
Jan 28 Javascript
javascript使用递归算法求两个数字组合功能示例
Jan 03 Javascript
bootstrap 下拉多选框进行多选传值问题代码分析
Feb 14 Javascript
vue2.x 父组件监听子组件事件并传回信息的方法
Jul 17 Javascript
纯js实现页面返回顶部的动画(超简单)
Aug 10 Javascript
Vue的MVVM实现方法
Aug 16 Javascript
Angular2.0/4.0 使用Echarts图表的示例代码
Dec 07 Javascript
JavaScript实现简单的文本逐字打印效果示例
Apr 12 Javascript
vue-cli 3.x 修改dist路径的方法
Sep 19 Javascript
关于React动态加载路由处理的相关问题
Jan 07 Javascript
js实现左右轮播图
Jan 09 Javascript
Vue初始化中的选项合并之initInternalComponent详解
Jun 11 #Javascript
Vue组件为什么data必须是一个函数
Jun 11 #Javascript
Vue实现点击箭头上下移动效果
Jun 11 #Javascript
webpack+express实现文件精确缓存的示例代码
Jun 11 #Javascript
详解vue 组件
Jun 11 #Javascript
vue实现员工信息录入功能
Jun 11 #Javascript
JavaScript Event Loop相关原理解析
Jun 10 #Javascript
You might like
Codeigniter中禁止A Database Error Occurred错误提示的方法
2014/06/12 PHP
php使用function_exists判断函数可用的方法
2014/11/19 PHP
php中上传文件的的解决方案
2018/09/25 PHP
PHP中单例模式的使用场景与使用方法讲解
2019/03/18 PHP
laravel 关联关系遍历数组的例子
2019/10/10 PHP
phpstudy隐藏index.php的方法
2020/09/21 PHP
jquery中获得$.ajax()事件返回的值并添加事件的方法
2010/04/15 Javascript
JQuery给元素添加/删除节点比如select
2013/04/02 Javascript
appendChild() 或 insertBefore()使用与区别介绍
2013/10/11 Javascript
js使用递归解析xml
2014/12/12 Javascript
简单纯js实现点击切换TAB标签实例
2015/08/23 Javascript
vue axios整合使用全攻略
2018/05/24 Javascript
vue富文本框(插入文本、图片、视频)的使用及问题小结
2018/08/17 Javascript
使用angular-cli webpack创建多个包的方法
2018/10/16 Javascript
TypeScript中使用getElementXXX()的示例代码
2019/09/12 Javascript
Vuex中实现数据状态查询与更改
2019/11/08 Javascript
javascript 对象 与 prototype 原型用法实例分析
2019/11/11 Javascript
vue-video-player实现实时视频播放方式(监控设备-rtmp流)
2020/08/10 Javascript
JavaScript实现移动小精灵的案例代码
2020/12/12 Javascript
[00:36]TI7不朽珍藏III——斯温不朽展示
2017/07/15 DOTA
详细介绍Python函数中的默认参数
2015/03/30 Python
Linux CentOS7下安装python3 的方法
2018/01/21 Python
pycharm激活码快速激活及使用步骤
2020/03/12 Python
Python类成员继承重写的实现
2020/09/16 Python
New Balance英国官方网站:始于1906年,百年慢跑品牌
2016/12/07 全球购物
de Bijenkorf比利时官网:荷兰最知名的百货商店
2017/06/29 全球购物
香港彩色隐形眼镜在线商店:Stunninglens(全球免费送货)
2019/05/10 全球购物
一套英文Java笔试题面试题
2016/04/21 面试题
大学生入党自我鉴定
2013/10/31 职场文书
销售人员获奖感言
2014/02/05 职场文书
医院财务人员岗位职责
2015/04/14 职场文书
2015年社区统计工作总结
2015/04/21 职场文书
辩护词格式
2015/05/22 职场文书
分析Python list操作为什么会错误
2021/11/17 Python
CSS实现五种常用的2D转换
2021/12/06 HTML / CSS
nginx 配置缓存
2022/05/11 Servers