浅谈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 常用方法总结
Jun 03 Javascript
JS自定义功能函数实现动态添加网址参数修改网址参数值
Aug 02 Javascript
jQuery列表拖动排列具体实现
Nov 04 Javascript
jQuery绑定事件的几种实现方式
May 09 Javascript
vue.js利用Object.defineProperty实现双向绑定
Mar 09 Javascript
JS实现的二叉树算法完整实例
Apr 06 Javascript
JS闭包可被利用的常见场景小结
Apr 09 Javascript
JS判断微信扫码的方法
Aug 07 Javascript
express框架实现基于Websocket建立的简易聊天室
Aug 10 Javascript
详解vue-cli构建项目反向代理配置
Sep 07 Javascript
.vue文件 加scoped 样式不起作用的解决方法
May 28 Javascript
详解ES6 export default 和 import语句中的解构赋值
May 28 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读取纯真ip数据库使用示例
2014/01/26 PHP
php面向对象编程self和static的区别
2016/05/08 PHP
Laravel5.5以下版本中如何自定义日志行为详解
2018/08/01 PHP
php防止表单重复提交实例讲解
2019/02/11 PHP
Jquery命名冲突解决的五种方案分享
2012/03/16 Javascript
javascript学习笔记(十一) 正则表达式介绍
2012/06/20 Javascript
javascript学习笔记(二十) 获得和设置元素的特性(属性)
2012/06/20 Javascript
基于jquery的文章中所有图片width大小批量设置方法
2013/08/01 Javascript
js中的onchange和onpropertychange (onchange无效的解决方法)
2014/03/08 Javascript
常用DOM整理
2015/06/16 Javascript
javascript 使用for循环时该注意的问题-附问题总结
2015/08/19 Javascript
在Linux系统中搭建Node.js开发环境的简单步骤讲解
2016/01/26 Javascript
JS组件Bootstrap Select2使用方法解析
2016/05/30 Javascript
jQuery实现侧边栏隐藏与显示的方法详解
2018/12/22 jQuery
微信小程序实现可长按移动控件
2020/11/01 Javascript
[01:03:51]2018DOTA2亚洲邀请赛 4.7 淘汰赛 VP vs LGD 第三场
2018/04/09 DOTA
python django集成cas验证系统
2014/07/14 Python
Django使用Celery异步任务队列的使用
2018/03/13 Python
解决Pandas to_json()中文乱码,转化为json数组的问题
2018/05/10 Python
Python基于OpenCV实现人脸检测并保存
2019/07/23 Python
详解Python中字符串前“b”,“r”,“u”,“f”的作用
2019/12/18 Python
浅谈python opencv对图像颜色通道进行加减操作溢出
2020/06/03 Python
python3.7 openpyxl 在excel单元格中写入数据实例
2020/09/01 Python
pandas统计重复值次数的方法实现
2021/02/20 Python
css3 iphone玻璃透明气泡完美实现
2013/03/20 HTML / CSS
美国创意之家:BulbHead
2017/07/12 全球购物
科茨沃尔德家居商店:Scotts of Stow
2018/06/29 全球购物
施工班组长岗位职责
2014/01/05 职场文书
如何写好升职自荐信
2014/01/06 职场文书
高中考试作弊检讨书
2014/01/14 职场文书
给水工程专业毕业生自荐信
2014/01/28 职场文书
毕业自我鉴定总结
2014/03/24 职场文书
班子四风对照检查材料思想汇报
2014/09/29 职场文书
公务员政审材料范文
2014/12/23 职场文书
小鞋子观后感
2015/06/05 职场文书
学长教您写论文:经验总结
2019/07/09 职场文书