浅谈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 29 Javascript
讨论html与javascript在浏览器中的加载顺序问题
Nov 27 Javascript
jquery实现个人中心导航菜单效果和美观都非常不错
Sep 02 Javascript
javascript实现秒表计时器的制作方法
Feb 16 Javascript
js对象实例详解(JavaScript对象深度剖析,深度理解js对象)
Sep 21 Javascript
用Webpack构建Vue项目的实践
Nov 07 Javascript
vue v-model实现自定义样式多选与单选功能
Jul 05 Javascript
JS解析后台返回的JSON格式数据实例
Aug 06 Javascript
Vue中使用ElementUI使用第三方图标库iconfont的示例
Oct 11 Javascript
开源一个微信小程序仪表盘组件过程解析
Jul 30 Javascript
JavaScript实现PC端横向轮播图
Feb 07 Javascript
AJAX引擎原理以及XmlHttpRequest对象的axios、fetch区别详解
Apr 09 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以fastCGI的方式运行时文件系统权限问题及解决方法
2015/05/11 PHP
javascript中的float运算精度实例分析
2010/08/21 Javascript
JAVASCRIPT模式窗口中下载文件无法接收iframe的流
2013/10/11 Javascript
使用jquery实现放大镜效果
2014/09/02 Javascript
jQuery DOM插入节点操作指南
2015/03/03 Javascript
Javascript实现的简单右键菜单类
2015/09/23 Javascript
省市区三级联动jquery实现代码
2020/04/15 Javascript
jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例
2018/05/09 jQuery
详解基于DllPlugin和DllReferencePlugin的webpack构建优化
2018/06/28 Javascript
vue.js 实现评价五角星组件的实例代码
2018/08/13 Javascript
Node.js学习教程之Module模块
2019/09/03 Javascript
Vue页面切换和a链接的本质区别详解
2019/11/12 Javascript
Vue 中 filter 与 computed 的区别与用法解析
2019/11/21 Javascript
JavaScript交换变量常用4种方法解析
2020/09/02 Javascript
vant-ui组件调用Dialog弹窗异步关闭操作
2020/11/04 Javascript
深入理解Django中内置的用户认证
2017/10/06 Python
Python中单例模式总结
2018/02/20 Python
python3将变量写入SQL语句的实现方式
2020/03/02 Python
Python flask框架实现查询数据库并显示数据
2020/06/04 Python
Python-for循环的内部机制
2020/06/12 Python
Python爬取网页信息的示例
2020/09/24 Python
mac系统下安装pycharm、永久激活、中文汉化详细教程
2020/11/24 Python
Nike加拿大官网:Nike.com (CA)
2019/04/09 全球购物
JD Sports澳洲官网:英国领先的运动鞋和运动时尚零售商
2020/02/15 全球购物
init进程的作用
2012/04/12 面试题
海飞丝广告词
2014/03/20 职场文书
基层党支部公开承诺书
2014/05/29 职场文书
工伤事故赔偿协议书范文
2014/09/24 职场文书
体育运动会广播稿
2014/10/05 职场文书
放弃继承权公证书
2015/01/23 职场文书
2015年超市工作总结
2015/04/09 职场文书
2015年秘书个人工作总结
2015/04/25 职场文书
千手观音观后感
2015/06/03 职场文书
校运会加油稿大全
2015/07/22 职场文书
2016年最美孝心少年事迹材料
2016/02/26 职场文书
基于MySql验证的vsftpd虚拟用户
2021/11/07 MySQL