vue实现滚动加载指令

JosonHo

已于 2022-03-25 10:19:27 修改

阅读量508

点赞数

分类专栏： vue 文章标签： vue.js javascript jquery

于 2021-04-15 16:24:21 首次发布

本文链接：https://blog.csdn.net/XTXTXTXTYYYY/article/details/115728453

版权

vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

滚动加载指令，附源码和使用案例，可直接使用。

背景：

因项目中需实现滚动分页，但是使用v-infinite-scroll渲染时会触发，所以自己实现滚动加载指令来替代

实现思路：

通过监听滚动事件，判断滚动到最底部时，触发加载事件

如何判断是否滚动到最底部呢：

这里我们通过判断：容器内的滚动距离是否大于或等于，容器的内高度减容器自身的高度的差，如果满足，则认为已经滚动至底部
滚动距离 >= 子级高度 - 自身高度

代码实现：

v-load-more指令的代码实现：

directives: {
  /* 通过判断 滚动距离 >= 子级高度 - 自身高度
    如果为true则认为到达底部 */ 
  loadMore: {
    inserted(el, binding) {
      el.addEventListener('scroll', function () {
        if (el.scrollTop >= el.scrollHeight - el.clientHeight) {
          binding.value()
        }
      })
    }
  }
},

附使用案例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
</head>
<body>
  <div id="app">
    <div class="list-container" v-load-more="loadMore">
      <div>
        <div class="list-item" v-for="(item, idx) in list" :key="idx">
          {{item}}
        </div>
      </div>
    </div>
  </div>
</body>
</html>

<script>
var app = new Vue({
  el: '#app',
  data: {
    list: 20,
  },
  directives: {
    /* 通过判断 滚动距离 >= 子级高度 - 自身高度
      如果为true则认为到达底部 */ 
    loadMore: {
      inserted(el, binding) {
        el.addEventListener('scroll', function () {
          if (el.scrollTop >= el.scrollHeight - el.clientHeight) {
            binding.value()
          }
        })
      }
    }
  },
  methods: {
    loadMore() {
      this.list += 20
    }
  },
})
</script>

<style>
  .list-container {
    margin: 0 auto;
    height: 500px;
    width: 400px;
    overflow-y: auto;
  }
  .list-item {
    line-height: 60px;
    text-align: center;
    background: #ccc;
    border-bottom: 1px solid #fff;
  }
</style>

github仓库源码

在线演示

ps：转载请注明出处

JosonHo

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
vue实现滚动加载指令

滚动加载指令，附源码和使用案例，可直接使用。背景：因项目中需实现滚动分页，但是使用v-infinite-scroll渲染时会触发，所以自己实现滚动加载指令来替代前提条件：jquery.js：使用了jquery计算元素高度，可自行替代为原生JavaScriptlodash.js：使用lodash处理滚动节流，可自行取消节流、或替代为原生JavaScript实现实现思路：通过监听滚动事件，判断滚动到最底部时，触发加载事件如何判断是否滚动到最底部呢：这里我们通过判断：容器内的滚动距离是否
复制链接

扫一扫