原创

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

温馨提示:
本文最后更新于 2022年09月05日,已超过 29 天没有更新。若文章内的图片失效(无法正常加载),请留言反馈或直接联系我

本来想使用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;

正文到此结束
本文目录