关于v-infinite-scroll的使用（踩坑心路）

最新推荐文章于 2023-07-12 14:31:35 发布

原创最新推荐文章于 2023-07-12 14:31:35 发布 · 1.5w 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #css #html

本文详细介绍了如何在Vue项目中使用Element-ui的无限滚动(v-infinite-scroll)功能，并分享了解决常见问题的经验，如事件不触发及阈值调整等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

当今，随着手机的普及与使用。web端不在局限于pc端，移动开发至关重要。在移动端数据的更新中，许多方法孕育而生。无限滚轮也是解决的方案一种。Element-ui为vue开发了一个事件。（v-infinite-scroll）

使用方法

在element-ui中有按需引入和全局引入的方法。底下有安装及配置方法我就细讲了！(加油)组件 | Elementhttps://element.eleme.cn/#/zh-CN/component/quickstart

使用心得

在使用这个组件中。我们先将他实例中的方法复制即可。

（嗯？？？他怎么在一直触发。是我用的不对吗？不能啊，我是直接CTRL二连（C+V）的。怎么可能会错呢）于是乎便在网上找到了答案。

害~正如网上说的，我并没有添加ul的高度且在这个组件的使用还得使用overflow才可以触发这个独一无二的事件。正当我满怀期待的去添加行内样式的时候。重新加载页面.....芜湖！！成功了！！我持续的向下滑鼠标滚轮。(嗯？一开始触发17次我滑一次18在滑一次并未触发。应该是没有触发事件。为什么呢？)带着疑问我又开始了摸索。

摸索了许久后。身边的同事热心的告诉我。ul并没有铺满，所以触发不了。原来。Element-ui说明书底下拥有一个阈值。当完全触碰到底部才会触发。所以拥有一个可以调节的阀值。而且ul尽量的要铺满整个屏幕。避免使用外部的滚动条。因为外部的滚动条并没有对应的事件。或者将高度在提高一点。让触底的地方大于阀值从而更好的触发如果有其他的组件想导航栏还有底部栏的时候可以使用CSS3的属性calc计算。达到你想要的效果。使用方法是calc(100vh - xxpx - xxrem)可以减多种值。但注意里面的都要有空格隔开。具体描述我就不一一介绍了。calc() - CSS（层叠样式表） | MDN (mozilla.org)https://developer.mozilla.org/zh-CN/docs/Web/CSS/calc()

完整的代码我就放到底下。

<template>
  <div>
    <div class="box" />
    <ul v-infinite-scroll="load" class="infinite-list" style="overflow:auto;height:calc(100vh - 49px)">
      <li v-for="i in count" class="infinite-list-item">{{ i }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    load() {
      console.log('我触发了')
      this.count += 2
    }
  }
}
</script>

<style>
.box{
  width: 100%;
  height: 50px;
  background-color: red;
  border: none;
}
</style>