[TOC] ## 移动端框架 vux 基于weui制作出的框架 ## vue-lazyload 一个简单易用的 Vue 图片延迟加载插件，[官网介绍](http://hilongjw.github.io/vue-lazyload/) ，vue-lazyload主要应用于图片延迟加载。包含如下的特点： * 小巧轻便，功能强大，易于使用 * 可以用于加载任何图像类型 * 支持Vue 1.0和Vue 2.0 ### 基本使用 ``` npm install vue-lazyload -s // mainjs使用 import Vue from 'vue' import App from './App.vue' import VueLazyload from 'vue-lazyload' Vue.use(VueLazyload, { preLoad: 1.3, // 预压高度的比例 error: '../assets/img/no-pic.png', // 图像的加载失败时 显示的error图标 loading: '../assets/imgLoading.png', // 图像正常加载时 显示的loading图标 attempt: 1 // 图像尝试加载 次数 }) import Vue from 'vue' import App from './App.vue' import VueLazyload from 'vue-lazyload' // 使用插件配置 Vue.use(VueLazyload, { preLoad: 1.3, // 预压高度的比例 error: '../assets/img/no-pic.png', // 图像的加载失败时 显示的error图标 loading: '../assets/imgLoading.png', // 图像正常加载时 显示的loading图标 attempt: 1 // 图像尝试加载 次数 }) // 组件中使用 <img v-lazy="item.picUrl" alt=""> ```