Vue.js可以通过vue-lazyload和vue-infinite-loading插件实现懒加载和预加载。下面是演示代码：
1.使用vue-lazyload实现懒加载：
安装依赖：
npm install vue-lazyload --save
在main.js中引入并注册：
import Vue from "vue"
import VueLazyload from "vue-lazyload"
Vue.use(VueLazyload)
在需要懒加载的组件中使用：
<template>
<div>
<img v-lazy="imgUrl">
</div>
</template>
<script>
export default {
data() {
return {
imgUrl: "需要懒加载的图片地址"
}
}
}
</script>
2.使用vue-infinite-loading实现预加载：
安装依赖：
npm install vue-infinite-loading --save
在需要预加载的组件中使用：
<template>
<div>
<ul>
<li v-for="(item, index) in list" :key="index">{{ item }}</li>
</ul>
<infinite-loading @infinite="infiniteHandler"></infinite-loading>
</div>
</template>
<script>
import InfiniteLoading from "vue-infinite-loading"
export default {
components: {
InfiniteLoading
},
data() {
return {
list: [], // 列表数据
page: 1 // 当前页数
}
},
methods: {
// 加载下一页数据
infiniteHandler($state) {
// 发送异步请求获取数据
axios.get("/api/data", {
params: {
page: this.page
}
})
.then(res => {
this.list.push(...res.data.list)
this.page++
$state.loaded() // 加载完成
if (!res.data.hasNext) {
$state.complete() // 数据全部加载完成
}
})
.catch(() => {
$state.error() // 加载出错
})
}
}
}
</script>
