vue实用demo通过滚动条滚动事件动态加载内容动态请求后台数据

前言

要实现滚动条动态加载必须要介绍三个属性

1. clientHeight 容器的高度
2. scrollTop 当前元素到容器头部的距离
3. scrollHeight 文本内容的总高度

demo效果

以上三张图分别为：demo初始化，第一次滚动条触发请求，第二次滚动条触发请求的效果图

实现要点

1. 添加滚动条监听事件

  mounted () {
     
    window.addEventListener('scroll', this.scrollHandle, true)
  }

2. 定义滚动条滚动事件的监听函数

    scrollHandle () {
     
      let scrollObj = document.getElementById('xxxxx') // 根据节点id获取滚动区域
      let clientHeight = scrollObj.clientHeight // 容器的高度
      let scrollTop = scrollObj.scrollTop // 当前关键字到头部的距离
      let scrollHeight = scrollObj.scrollHeight // 文本内容的总高度
      // 触发加载数据的条件
      if (scrollTop + clientHeight > scrollHeight - 80) {
     
        // 到头部的距离 + 容器高度 > 文本内容的总高度 - 预留到底的距离
        //doSomething
      }
    }

3. 离开页面时清除滚动条监听事件

  destroyed () {
     
    window.removeEventListener('scroll', this.scrollHandle)
  }

全量demo

以下为小demo的全部代码，希望能帮助到大家

<template>
  <div class="scroller box-size" id="textArea" v-html="text"></div>
</template>
<script>
export default {
     
  name: 'test',
  data () {
     
    return {
     
      text: '',
      addTime: 1
    }
  },
  methods: {
     
    initText () {
     
      this.text = `原始文本原始文本原始文本原始文本原始文本原始文本原始文本原始文本原始文本
        原始文本原始文本原始文本原始文本原始文本原始文本原始文本原始文本原始文本原始文本
        原始文本原始文本原始文本原始文本原始文本原始文本原始文本原始文本原始文本原始文本
        原始文本原始文本原始文本原始文本原始文本原始文本原始文本原始文本原始文本原始文本
        原始文本原始文本原始文本原始文本原始文本原始文本原始文本原始文本原始文本原始文本
        原始文本原始文本原始文本原始文本原始文本原始文本原始文本原始文本原始文本原始文本
        原始文本原始文本原始文本原始文本原始文本原始文本原始文本原始文本原始文本原始文本
        原始文本原始文本原始文本原始文本原始文本原始文本原始文本原始文本原始文本原始文本
        原始文本原始文本原始文本原始文本原始文本原始文本原始文本原始文本原始文本原始文本
        原始文本原始文本原始文本原始文本原始文本原始文本原始文本原始文本原始文本原始文本
        原始文本原始文本原始文本原始文本原始文本原始文本原始文本原始文本原始文本原始文本
        原始文本原始文本原始文本原始文本原始文本原始文本原始文本原始文本原始文本原始文本
        原始文本原始文本原始文本原始文本原始文本原始文本原始文本原始文本原始文本原始文本
        原始文本原始文本原始文本原始文本原始文本原始文本原始文本原始文本原始文本原始文本
        原始文本原始文本原始文本原始文本原始文本原始文本原始文本原始文本原始文本原始文本
        原始文本原始文本原始文本原始文本原始文本原始文本原始文本原始文本原始文本原始文本
        原始文本原始文本原始文本原始文本原始文本原始文本原始文本原始文本原始文本原始文本
        原始文本原始文本原始文本原始文本原始文本原始文本原始文本原始文本原始文本原始文本
        原始文本原始文本原始文本原始文本原始文本原始文本原始文本原始文本原始文本原始文本
        原始文本原始文本原始文本原始文本原始文本原始文本原始文本原始文本原始文本原始文本
        原始文本原始文本原始文本原始文本原始文本原始文本原始文本原始文本原始文本原始文本
        原始文本原始文本原始文本原始文本原始文本原始文本原始文本原始文本原始文本原始文本
        原始文本原始文本原始文本原始文本原始文本原始文本原始文本原始文本原始文本原始文本`
    },

    scrollHandle () {
     
      let scrollObj = document.getElementById('textArea') // 滚动区域
      let clientHeight = scrollObj.clientHeight // 容器的高度
      let scrollTop = scrollObj.scrollTop // 当前关键字到头部的距离
      let scrollHeight = scrollObj.scrollHeight // 文本内容的总高度

      // 触发加载数据的条件
      if (scrollTop + clientHeight > scrollHeight - 80) {
     
        // 到头部的距离 + 容器高度 > 文本内容的总高度 - 预留到底的距离
        this.addNewStr()
      }
    },
    addNewStr () {
     
      const addText = `增加文本增加文本增加文本增加文本增加文本增加文本增加文本增加文本增加文本
      增加文本增加文本增加文本增加文本增加文本增加文本增加文本增加文本增加文本增加文本增加文本增加文本
      增加文本增加文本增加文本增加文本增加文本增加文本增加文本增加文本增加文本增加文本增加文本增加文本
      增加文本增加文本增加文本增加文本增加文本增加文本增加文本增加文本增加文本增加文本增加文本增加文本
      增加文本增加文本增加文本增加文本增加文本`
      let nowStr = '第' + String(this.addTime) + '次触发追加文本' + addText
      this.text = this.text + nowStr
      this.addTime++
    }

  },
  destroyed () {
     
    window.removeEventListener('scroll', this.scrollHandle) //  离开页面时清除滚条滚动事件
  },
  mounted () {
     
    this.initText()
    window.addEventListener('scroll', this.scrollHandle, true) // 监听滚条滚动事件
  }
}
</script>
<style>
.box-size{
     
    margin:20px 50px;
    width:300px;
    height:400px;
    border:solid 1px #c8c8c8;
    overflow-y:auto;
}

.scroller::-webkit-scrollbar {
     
 width: 8px;
}
.scroller::-webkit-scrollbar-track {
     
 background-color:#F5F5F5;
 -webkit-border-radius: 2em;
 -moz-border-radius: 2em;
 border-radius:2em;
}
 .scroller::-webkit-scrollbar-thumb {
     
 background-color:#c8c8c8;
 -webkit-border-radius: 2em;
 -moz-border-radius: 2em;
 border-radius:2em;
}
</style>

补充

将demo中addNewStr函数实现调整为从后端请求数据并将得到的数据追加到展示文本中，就可以动态获取后台数据