浅谈element中InfiniteScroll按需引入的一点注意事项


Posted in Javascript onJune 05, 2020

大家为了节省空间,常常进行按需引入来节省空间,这里我给大家来介绍一下element中按需引入无限滚动指令注意的事项。

针对前面element 按需引入的一些配置这里就不再详细介绍了。
那么这里讲的是在main.js写入以下代码。

import { InfiniteScroll } from 'element-ui';
Vue.use(InfiniteScroll)

好,这样引入、注册了,那么我们接下来做得事情就是在页面使用它。

<template>
 <ul class="infinite-list" v-infinite-scroll="load" style="overflow:auto">
  <li v-for="i in count" class="infinite-list-item">{{ i }}</li>
 </ul>
</template>

<script>
 export default {
  data () {
   return {
    count: 0
   }
  },
  methods: {
   load () {
    this.count += 2
   }
  }
 }
</script>

这里你们可能嘲讽我,为啥把代码复制过来,哈哈,这只是为了更加方便。这里注意的是一定要给容器加上overflow:auto或者overflow:hidden,

给容器加上滚动条,这样就不会报错。 

到此这篇关于浅谈element中InfiniteScroll按需引入的一点注意事项的文章就介绍到这了,更多相关element InfiniteScroll按需引入内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
用javascript实现页面打印的三种方法
Mar 05 Javascript
JavaScript 乱码问题
Aug 06 Javascript
jQuery 1.5 源码解读 面向中高阶JSER
Apr 05 Javascript
介绍一个简单的JavaScript类框架
Jun 24 Javascript
javascript性能优化之事件委托实例详解
Dec 12 Javascript
js获取对象、数组的实际长度,元素实际个数的实现代码
Jun 08 Javascript
AngularJS 服务详细讲解及示例代码
Aug 17 Javascript
Jquery鼠标放上去显示全名的实现方法
Feb 06 Javascript
日期时间范围选择插件:daterangepicker使用总结(必看篇)
Sep 14 Javascript
Node.js 使用jade模板引擎的示例
May 11 Javascript
Vue实现将数据库中带html标签的内容输出(原始HTML(Raw HTML))
Oct 28 Javascript
js实现上传图片到服务器
Apr 11 Javascript
使用JavaScript实现网页秒表功能(含开始、暂停、继续、重置功能)
Jun 05 #Javascript
Node.js API详解之 dgram模块用法实例分析
Jun 05 #Javascript
taro 实现购物车逻辑的实例代码
Jun 05 #Javascript
Node.js API详解之 V8模块用法实例分析
Jun 05 #Javascript
Vue CLI4 Vue.config.js标准配置(最全注释)
Jun 05 #Javascript
使用Taro实现小程序商城的购物车功能模块的实例代码
Jun 05 #Javascript
Vue路由的模块自动化与统一加载实现
Jun 05 #Javascript
You might like
学习php中的正则表达式
2014/08/17 PHP
php中常量DIRECTORY_SEPARATOR用法深入分析
2014/11/14 PHP
php管理nginx虚拟主机shell脚本实例
2014/11/19 PHP
php制作的简单验证码识别代码
2016/01/26 PHP
会自动逐行上升的文本框
2006/06/30 Javascript
JS查看对象功能代码
2008/04/25 Javascript
Javascript实现仿WebQQ界面的“浮云”兼容 IE7以上版本及FF
2011/04/27 Javascript
JavaScript简单实现网页回到顶部功能
2013/11/12 Javascript
原始XMLHttpRequest方法详情回顾
2013/11/28 Javascript
zeroclipboard 单个复制按钮和多个复制按钮的实现方法
2014/06/14 Javascript
node.js中的fs.readFileSync方法使用说明
2014/12/15 Javascript
js限制文本框只能输入整数或者带小数点的数字
2015/04/27 Javascript
JavaScript中的fontsize()方法使用详解
2015/06/08 Javascript
浅析JS操作DOM的一些常用方法
2016/05/13 Javascript
jquery.multiselect多选下拉框实现代码
2016/11/11 Javascript
nodejs个人博客开发第六步 数据分页
2017/04/12 NodeJs
深入理解AngularJs-scope的脏检查(一)
2017/06/19 Javascript
jQuery Datatable 多个查询条件自定义提交事件(推荐)
2017/08/24 jQuery
js定时器实现倒计时效果
2017/11/05 Javascript
Electron 打包问题:electron-builder 下载各种依赖出错(推荐)
2020/07/09 Javascript
[59:53]DOTA2-DPC中国联赛 正赛 VG vs Elephant BO3 第二场 3月6日
2021/03/11 DOTA
Python yield与实现方法代码分析
2018/02/06 Python
python购物车程序简单代码
2018/04/18 Python
Python实现随机生成手机号及正则验证手机号的方法
2018/04/25 Python
Python可变参数*args和**kwargs用法实例小结
2018/04/27 Python
Python命名空间的本质和加载顺序
2018/12/17 Python
python验证码图片处理(二值化)
2019/11/01 Python
python 子类调用父类的构造函数实例
2020/03/12 Python
一文解决django 2.2与mysql兼容性问题
2020/07/15 Python
个人现实表现材料
2014/02/04 职场文书
酒店行政人事部经理职务说明书
2014/02/26 职场文书
体育运动口号
2014/06/09 职场文书
小学兴趣小组活动总结
2014/07/07 职场文书
蛋糕店创业计划书范文
2014/09/21 职场文书
个人授权委托书范本格式
2014/10/12 职场文书
假期读书倡议书3篇
2019/08/19 职场文书