vueApp图片懒加载使用

vue图片懒加载使用

  1.先在main.js中配置
 import { Lazyload } from 'vant' // 导入懒加载模块Lazyload
 Vue.use(Lazyload) // 注册懒加载指令

import { Lazyload } from 'vant' // 导入懒加载模块Lazyload
Vue.use(Lazyload) // 注册懒加载指令

    <van-grid :column-num="2">
  <van-grid-item v-for="(item,index) in arr"  :key="index" icon="photo-o" text="文字" >
<!-- lazy-load设置图片懒加载，是一个自定义指令 -->
 <van-image width="100%"  :src="item.pic" lazy-load/>
       <p class="p1">{{ item.title }}</p>
         <div class="one">
          <p class="p2">￥{{ item.price }}</p>
          <p><van-icon name="shopping-cart-o" /></p>
        </div>
  </van-grid-item>
</van-grid>

然后就可以实现懒加载了