一、 使用
Lazyload是Vue指令,使用前需要对指令进行注册
import {createApp} from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import Vant {Lazyload} from 'vant'
import 'vant/lib/index.css'
createApp(App).use(store).use(router).use(Vant).use(Lazyload,{
lazyCommponent:true
}).mount('#app')
使用懒加载之前,记住需要下载指令懒加载的vue指令
npm install vue-lazyload --save-dev
另外组件使用懒加载需要进行开启
部分官网都是介绍的
<van-card
:price="item.price"
:desc="item.desc"
:title="item.title"
class="goods-card"
:thumb="item.img"
:lazy-load="true"
/>
比如这个是vant说的开启,如果你不开启,就是false,就是没有办法使用所谓的懒加载的
然后在V-for循环的地方,进行
例如:
v-for="(item,index) in Audis" :key="index" v-lazy="item.img"
循环你的图片item.img =>img是你的图片,你的可能不是img,比如你的数组[{image:'图片地址'}]
那就是item.image
这是关于组件的=======================================
如果是自己的写的图片循环那就直接v-for="img in xxx" v-lazy="img"
————————————————