[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=""> ```