主要是此代码块使懒加载生效:
Vue.use(vant.Lazyload, {
lazyComponent: true
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.suoluomei.com/common/js2.0/npm/vant@2.2/lib/index.css">
</head>
<style>
img {
width: 100%;
height: 100%;
}
</style>
<body>
<div class="box">
<div class="img" v-for="(item,index) in imgList" :key="index">
<img v-lazy="item">
</div>
</div>
</body>
<script src="https://cdn.suoluomei.com/common/js2.0/vue/v2.5.16/vue.js"></script>
<script src="https://cdn.suoluomei.com/common/js2.0/npm/vant@2.2/lib/vant.min.js"></script>
<script>
Vue.use(vant.Lazyload, {
lazyComponent: true
});
new Vue({
el: '.box',
data: {
imgList: ['https://sucai.suoluomei.cn/sucai_zs/images/20200521092752-1.png',
'https://sucai.suoluomei.cn/sucai_zs/images/20200831135929-2.png',
'https://sucai.suoluomei.cn/sucai_zs/images/20200828101714-1.png',
'https://sucai.suoluomei.cn/sucai_zs/images/20200812155508-2.jpg',
'https://sucai.suoluomei.cn/sucai_zs/images/20200801104325-4.png']
}
})
</script>
</html>