vue-lazyload的使用
1.下载依赖
npm install vue-lazyload --save
2.引入
import Vue from 'vue' import App from '@/App' import VueLazyload from 'vue-lazyload'
3.配置
Vue.use(VueLazyload, { error: 'dist/error.png',//这个是请求失败后显示的图片 loading: 'dist/loading.gif',//这个是加载的loading过渡效果 try: 2 // 这个是加载图片数量 })
4.组件使用
<template><div class="lazyLoad"><ul id="container"><li v-for="img in arr"><img v-lazy="img.thumbnail_pic_s"></li></ul></div> </template><script>export default({name:"lazyLoad",data(){return{arr:[]}},mounted:function(){this.$http.get('/api/data').then(res=>{this.arr=res.data.data;console.log(this.data)})},}) </script><style scoped> li{list-style: none } </style>
注意:这里我用的是mock模拟请求数据后的图片,也可以直接在data里返回一个数组里放一组图片进行测试
转载于:https://www.cnblogs.com/ldlx-mars/p/7772726.html
vue-lazyload的使用相关推荐
- nodeJs + webpack+vue+ element ui 环境安装
一.安装nodeJs 1.打开NodeJs官网:https://nodejs.org/en/download/ 点击下载 2.双击安装,安装过程基本直接"NEXT"就可以了.(w ...
- vue.js移动端记账本完成的总结(未完待续,电脑快没电了)
两个目的 第一个目的:这一个移动端记账本的创作来源呢,其实是我在学习了理财的课程之后,突然想为自己写一个记账的东西来记录自己每天花费的钱,从而可以降低那些不必要的开销,从而达到理财的第一步. 当然还有 ...
- vue.js移动端记账本完成的总结(未完待续,电脑快没电了) 1
两个目的 第一个目的:这一个移动端记账本的创作来源呢,其实是我在学习了理财的课程之后,突然想为自己写一个记账的东西来记录自己每天花费的钱,从而可以降低那些不必要的开销,从而达到理财的第一步. 当然还有 ...
- vue-lazyload图片懒加载的简单使用
一.vue lazyload插件: 插件地址:https://github.com/hilongjw/vue-lazyload demo:http://hilongjw.github.io/vue-l ...
- 教你如何实现一个完美的移动端瀑布流组件(附源码)
背景 瀑布流是大家日常开发过程中经常遇到的一个场景,我们公司内部的组件库中也提供了一些解决方案.但这些方案适用场景都很单一,且每个实现方案都或多或少存在一些问题,基于此,我们设计与开发了一个兼容多场景 ...
- 【实战】1364- 实现一个完美的移动端瀑布流组件(附源码)
背景 瀑布流是大家日常开发过程中经常遇到的一个场景,我们公司内部的组件库中也提供了一些解决方案.但这些方案适用场景都很单一,且每个实现方案都或多或少存在一些问题,基于此,我们设计与开发了一个兼容多场景 ...
- vue中使用lazyload实现图片懒加载
原理:先将img标签的src链接设为同一张图片(比如空白图片),然后给img标签设置自定义属性(比如 data-src),然后将真正的图片地址存储在data-src中,当JS监听到该图片元素进入可视窗 ...
- Vant报错:[Vue warn]: Invalid prop: type check failed for prop “lazyLoad“. Expected Boolean, got String
使用vant懒加载设置lazy-load后报错信息: 这里很奇怪,对比官方文档看了下,是设置true没错啊,为什么怎么改都报错 解决:v-for循环中要用v-bind,即:绑定属性设置
- Vant 组件库(VUE)的使用 Vant滚动选择器 选择器 传值
在 vue- cli 项目中安装 官方文档链接 npm ( 后面内容需要在控制台终端输入) # 通过 npm 安装 npm i vant -S 自动按需引入组件:babel-plugin-impor ...
- 经典文摘:饿了么的 PWA 升级实践(结合Vue.js)
自 Vue.js 官方推特第一次公开到现在,我们就一直在进行着将饿了么移动端网站升级为 Progressive Web App 的工作.直到近日在 Google I/O 2017 上登台亮相,才终于算 ...
最新文章
- Python3中的装饰器
- cocos2d-x 2.x版本使用uiwidget需要注意的几点
- python莱布尼茨法计算π_酷叮猫少儿编程讲堂——Python 用莱布尼茨等式求π
- opengl加载显示3D模型UC类型文件
- 微信支付PKIX path building failed
- Fortinet SD-Branch保障医疗服务机构安全组网
- java swing取消按钮_在Java Swing中取消选择单选按钮
- 荷兰,伟大的荷兰,世界冠军,继承了克鲁伊夫,继承荷兰三剑客的优秀传统...
- uni-app 开发微信小程序,网络断开,无网络情况,刷新检查,重新加载
- 远程控制软件teamview好用么?
- 备考通信复试过程中的一些知识点总结梳理——移动通信系统Ⅰ
- 堪比阿里插件的Android Studio插件集合(IDE通用)(下)
- 解决Java提示“编码GBK的不可映射字符”的问题
- 自媒体平台数据统计分析爬虫之【一点号】模拟登陆分析详解及数据统计接口详解
- java计算机毕业设计南京传媒学院门户网源程序+mysql+系统+lw文档+远程调试
- C++游戏开发入门制作:经典游戏拳皇97
- 基因表达矩阵中排除表达量低的样本和基因
- Android之Wifi使用
- 小程序商店刷榜_微信小程序游戏跳一跳刷榜原理解析!
- OpenGL模拟太阳系运行
热门文章
- php广告屏如何同步,户外LED大屏广告如何投放才能更吸引人?
- 电子表格和oracle,##请问数据库和电子表格之间有什么区别
- pytorch深度学习基础总结
- python入门简单小程序
- 指利用计算机技术实现对文本篇章的理解,行业发展|人工智能的自然语言处理技术已经到了这一步...
- python123下载失败_安装python3.5时出现严重错误无法完成安装,请问这个是什么情况?怎么解决??...
- 计算机视觉基础-图像处理 Task05 图像分割/二值化
- “我想进大厂做AI工程师”“你冷静一下”
- 《Tensorflow 实战》(完整版,附源码)
- 是用于mac的linux,用于Mac OS X的Can(CUPS)ppd文件可用于Linux吗?