原创

vue实现瀑布流 vue-infinite-scroll使用教程

温馨提示：

本文最后更新于 2022年09月05日，已超过 743 天没有更新。若文章内的图片失效（无法正常加载），请留言反馈或直接联系我。

本来想使用vue实现瀑布流的效果，就去面向百度编程了，害，网上的内容真实鱼龙混在呀！！！

很多例子都不能用的（搬运别人的），在做的时候出现的问题就是无限加载不会停止，自己在研究解决后，写下博客记录
效果如下图，如果你也需要实现如下效果，那快收藏一下吧。
file

安装依赖

npm  i vue-infinite-scroll --save

vue-infinite-scroll，从这个插件的名字（vue无限滚动）就可以看出这是干什么用的了

全局引入

在main.js中引入vue-infinite-scroll

// 引入
import infiniteScroll from 'vue-infinite-scroll'

// 全局组件挂载
Vue.use(infiniteScroll)

页面使用

<template>
  <div class="home">
    <div  v-infinite-scroll="loadMore" infinite-scroll-distance="10" class="infinite-list" >
        <UBook v-for="(i,index) in count" ></UBook> // 重复加载的组件
    </div>
  </div>
</template>
<script>
import Book from "@/views/library/book";
import UBook from "@/components/Library/user/Book";
export default {
  components: {UBook, Book},
  data() {
    return {
      count:0
    }
  },
  methods: {
    loadMore() {
      this.count+=1;
    }
  }
};
</script>
<style lang="scss">
.home {
  .infinite-list{
    width: 100%;
    height: 700px; // 区域的高度也必须有
    line-height: 40px;
    background: lightblue;
    margin:10px;
    overflow-x: hidden; // 横向滚动条可以隐藏 纵向的不可以隐藏 通过滚动条来判断是否触底的
   // overflow-y: hidden;
  }

}
</style>

要点总结

① v-infinite-scroll="loadMore"

loadMore:是触底后回调的方法

② infinite-list样式里面必须设置高度，和overflow-x: hidden;或 overflow: auto;

正文到此结束

所属分类：前端技术

本文标签： vue element ui
本文链接： https://www.it1997.com/article/106
版权声明： 本文由小陈没烦恼原创发布，转载请遵循《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》许可协议授权

vue实现瀑布流 vue-infinite-scroll使用教程

安装依赖

全局引入

页面使用

要点总结

相关文章

热门推荐

说给你听

本文目录

标签云

近期评论

网站信息