码迷,mamicode.com
首页 > 移动开发 > 详细

使用 vant 的 v-lazy 实现图片 vue 在移动端的懒加载

时间:2020-01-15 12:03:01      阅读:767      评论:0      收藏:0      [点我收藏+]

标签:uri   vue   port   rom   you   def   地址   options   mic   

官方文档:https://youzan.github.io/vant/#/zh-CN/lazyload

引入

Lazyload 是 Vue 指令,使用前需要对指令进行注册

import Vue from 'vue';
import { Lazyload } from 'vant';

// options 为可选参数,无则不传
Vue.use(Lazyload, options);

基本用法

将v-lazy指令的值设置为你需要懒加载的图片

<img v-for="img in imageList" v-lazy="img" >
export default {
  data() {
    return {
      imageList: [
        'https://img.yzcdn.cn/vant/apple-1.jpg',
        'https://img.yzcdn.cn/vant/apple-2.jpg'
      ]
    };
  }
}

背景图懒加载

和图片懒加载不同,背景图懒加载需要使用 v-lazy:background-image,值设置为背景图片的地址,需要注意的是必须声明容器高度。

<div v-for="img in imageList" v-lazy:background-image="img" />

组件懒加载

将需要懒加载的组件放在 lazy-component 标签中,即可实现组件懒加载

// 注册时设置`lazyComponent`选项
Vue.use(Lazyload, {
  lazyComponent: true
});
<lazy-component>
  <img v-for="img in imageList" v-lazy="img" >
</lazy-component>

API

技术图片


更多内容请参照:vue-lazyload 官方文档

使用 vant 的 v-lazy 实现图片 vue 在移动端的懒加载

标签:uri   vue   port   rom   you   def   地址   options   mic   

原文地址:https://www.cnblogs.com/wbyixx/p/12195639.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有 京ICP备13008772号-2
迷上了代码!