当前位置:   article > 正文

vue判断滚动条是否触底(触底增加数据)_vue-seamless-scroll 通过高度判断

vue-seamless-scroll 通过高度判断

html部分

  1. <div id="scro" style="height:300px;overflow: auto;" >
  2. <a-table
  3. style="margin-top:20px;background:#fff" :columns="columns"
  4. :dataSource="dataSource" :customRow="customRow" :pagination="false">
  5. </a-table>
  6. </div>

js部分

  1. beforeDestroy () {
  2. // 要进行函数卸载
  3. this.scroEl.removeEventListener('scroll', this.handleScroll)
  4. },
  5. mounted () {
  6. // this.dragJs()
  7. this.listenerFunction()
  8. var scroEl = document.getElementById('scro')
  9. this.scroEl = scroEl
  10. },
  11. methods: {
  12. // 监听滚动事件 scroEl是table外的div的dom
  13. listenerFunction (e) {
  14. var scroEl = document.getElementById('scro')
  15. scroEl.addEventListener('scroll', this.handleScroll, true)
  16. },
  17. handleScroll () {
  18. // scroel
  19. var scroEl = document.getElementById('scro')
  20. // 获取内容高度
  21. const scrollHeight = scroEl.scrollHeight
  22. // 获取滚动条纵坐标位置
  23. const scrollTop = scroEl.scrollTop
  24. // 我给的div高度是300px
  25. // 判断是否到底部是的话把数据push进去
  26. if (scrollHeight === scrollTop + 300) {
  27. this.dataSource.push({
  28. name: '测试',
  29. age: 16,
  30. address: '测试',
  31. key: 13
  32. })
  33. }
  34. },
  35. }

判断滚动条是否触底逻辑就是 scrollHeight===scrollTop+div的高度(或者window.clientheight)

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/698629
推荐阅读