浅谈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 相关文章推荐
js 判断浏览器类型 去全角、半角空格 自动关闭当前窗口
Apr 10 Javascript
jquery ready函数源代码研究
Dec 06 Javascript
jquery 通过name快速取值示例
Jan 24 Javascript
理解JavaScript的变量的入门教程
Jul 07 Javascript
javascript实现超炫的向上滑行菜单实例
Aug 03 Javascript
jQuery实现的图文高亮滚动切换特效实例
Aug 10 Javascript
JS定时器用法分析【时钟与菜单中的应用】
Dec 21 Javascript
原生js实现倒计时--2018
Feb 21 Javascript
for循环 + setTimeout 结合一些示例(前端面试题)
Aug 30 Javascript
React Native预设占位placeholder的使用
Sep 28 Javascript
JS实现换肤功能的方法实例详解
Jan 30 Javascript
react实现antd线上主题动态切换功能
Aug 12 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中如何判断一个网页请求是ajax请求还是普通请求
2013/08/10 PHP
PHP Global定义全局变量使用说明
2013/08/15 PHP
Windows下编译PHP5.4和xdebug全记录
2015/04/03 PHP
php面向对象与面向过程两种方法给图片添加文字水印
2015/08/26 PHP
CodeIgniter表单验证方法实例详解
2016/03/03 PHP
PHP实现上传多图即时显示与即时删除的方法
2017/05/09 PHP
Nigma vs Alliance BO5 第三场2.14
2021/03/10 DOTA
Javascript 阻止javascript事件冒泡,获取控件ID值
2009/06/27 Javascript
jQuery过滤选择器:not()方法使用介绍
2014/04/20 Javascript
Js实现手机发送验证码时按钮延迟操作
2014/06/20 Javascript
js实现iPhone界面风格的单选框和复选框按钮实例
2015/08/18 Javascript
谈谈js中的prototype及prototype属性解释和常用方法
2015/11/25 Javascript
一道优雅面试题分析js中fn()和return fn()的区别
2016/07/05 Javascript
JS异步文件分片断点上传的实现思路
2016/12/25 Javascript
基于vue2的table分页组件实现方法
2017/03/20 Javascript
AngularJs 常用的过滤器
2017/05/15 Javascript
使用Electron构建React+Webpack桌面应用的方法
2017/12/15 Javascript
webpack构建的详细流程探底
2018/01/08 Javascript
详解Ant Design of React的安装和使用方法
2018/12/27 Javascript
Vue快速实现通用表单验证的示例代码
2020/01/09 Javascript
vue 移动端记录页面浏览位置的方法
2020/03/11 Javascript
[36:45]TNC vs VGJ.S 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
浅谈python中截取字符函数strip,lstrip,rstrip
2015/07/17 Python
Python的Flask框架应用调用Redis队列数据的方法
2016/06/06 Python
scrapy利用selenium爬取豆瓣阅读的全步骤
2020/09/20 Python
python 如何区分return和yield
2020/09/22 Python
Python基于staticmethod装饰器标示静态方法
2020/10/17 Python
python温度转换华氏温度实现代码
2020/12/06 Python
在css3中background-clip属性与background-origin属性的用法介绍
2012/11/13 HTML / CSS
Java面向对象面试题
2016/12/26 面试题
会计学应届毕业生推荐信
2013/11/04 职场文书
庆祝教师节活动方案
2014/01/31 职场文书
党干部专题民主生活会对照检查材料思想汇报
2014/10/06 职场文书
国庆横幅标语
2014/10/08 职场文书
幼儿园新生开学寄语
2015/05/27 职场文书
windows系统安装配置nginx环境
2022/06/28 Servers