vue-infinite-scroll 和 vue-lazyload 下拉加载图片懒加载

最新推荐文章于 2024-07-24 14:58:19 发布

安城-

最新推荐文章于 2024-07-24 14:58:19 发布

阅读量1.4k

点赞数

分类专栏： vue vue-infinite-scroll 文章标签： js vue vue-resource vue-infinite-scroll vue-lazyload

本文链接：https://blog.csdn.net/qq_32715147/article/details/80378746

版权

本文介绍了如何在Vue项目中实现下拉加载数据功能，利用vue-infinite-scroll库来监听滚动事件，当达到指定位置时触发加载更多数据。同时，还探讨了图片的懒加载，通过vue-lazyload插件实现只在图片进入视口时才加载，提高页面性能。在CSS和HTML中设置相应属性，并在Vue组件中使用v-lazy指令配合循环加载图片。

摘要由CSDN通过智能技术生成

vue下拉数据无限加载 - vue-infinite-scroll

vue图片懒加载功能 - vue-lazyload

css:

#app{
    width: 300px;
    height: 500px;
}
.item{    
    width: 100%;    
    height: 100px;
}
.item img{
    width: 50px;
    height: 50px;
}
.v-infinite-scroll-loading {
    margin-bottom: 30px;
    text-align: center;
}
.v-infinite-scroll-noMore {
    text-align: center;
    color: #9c9c9c;
    margin-bottom: 20px;
    font-size: 14px;
}

html:

<div id="app">
    <div class="item" v-for="item in list">
        {
  {item.name}}
        <img v-lazy="item.src">
    </div>
    <div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
          <div v-show="loadingShow&#