1.下载依赖
npm install vue-lazyload --save
2.引入
import Vue from 'vue'
import App from '@/App'
import VueLazyload from 'vue-lazyload'
3.配置
Vue.use(VueLazyload, {
error: 'dist/error.png',//这个是请求失败后显示的图片
loading: 'dist/loading.gif',//这个是加载的loading过渡效果
try: 2 // 这个是加载图片数量
})
4.组件使用
<template>
<div class="lazyLoad">
<ul id="container">
<li v-for="img in arr">
<img v-lazy="img.thumbnail_pic_s">
</li>
</ul>
</div>
</template> <script>
export default({
name:"lazyLoad",
data(){
return{
arr:[]
}
},
mounted:function(){
this.$http.get('/api/data').then(res=>{
this.arr=res.data.data;
console.log(this.data)
})
},
})
</script> <style scoped>
li{
list-style: none
}
</style>
注意:这里我用的是mock模拟请求数据后的图片,也可以直接在data里返回一个数组里放一组图片进行测试