温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

vue scroll如何实现滚动判断?

发布时间:2020-06-23 18:22:36 来源:亿速云 阅读:393 作者:清晨 栏目:web开发

这篇文章将为大家详细讲解有关vue scroll如何实现滚动判断?,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

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如何实现滚动判断?

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如何实现滚动判断?就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI