猿记录

一个记录、分享的博客

您的位置:主页 > 技术专栏 > javascript > vue >

vue的一些常用插件介绍

2018-01-18 17:42:26 作者:yxl 次阅读 vue

1、vue-lazyload   这个是图片懒加载,具体api看文档
     使用方式:
           import VueLazyload from 'vue-lazyload' //懒加载
 
Vue.use(VueLazyload, {
preLoad: 1.3,
error: 'dist/error.png',
loading: '/static/loading-svg/loading-bars.svg',
attempt: 1
})

然后在html <img v-lazy="'static/'+good.productImage" alt="">  添加一个v-lazy 属性

 
2、vue-infinite-scroll  这是滚动分页加载      需要添加 下面的一个div 然后在data方法中添加busy属性,最后需要实现loadMore方法,具体看文档
     使用方式:
      import infiniteScroll from 'vue-infinite-scroll' //滚动加载

Vue.use(infiniteScroll)
html:

<div class="load-more" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="30">
      加载中
</div>
           js:
          data(){
             return{
                  busy:true,
             }
          },
          methods:{
                loadMore(){
this.busy = true;
setTimeout(() => {
this.page ++;
this.getList(true);
}, 500);
}
           }

凡本站注明“本站”或“投稿”的所有文章,版权均属于本站或投稿人,未经本站授权不得转载、摘编或利用其它方式使用上述作品。

编辑:yxl 关键词: Vue
0

网友评论