浅谈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 相关文章推荐
解决extjs在firefox中关闭窗口再打开后iframe中js函数访问不到的问题
Nov 06 Javascript
一个简单的JavaScript 日期计算算法
Sep 11 Javascript
jQuery点击自身以外地方关闭弹出层的简单实例
Dec 24 Javascript
javascript实现倒计时跳转页面
Jan 17 Javascript
Javascript实现图片加载从模糊到清晰显示的方法
Jun 21 Javascript
javascript数组常用方法汇总
Sep 10 Javascript
BootStrap学习系列之布局组件(下拉,按钮组[toolbar],上拉)
Jan 03 Javascript
JavaScript事件方法(实例讲解)
Jun 27 Javascript
JavaScript中Object值合并方法详解
Dec 22 Javascript
一步一步实现Vue的响应式(对象观测)
Sep 02 Javascript
Node.js API详解之 zlib模块用法分析
May 19 Javascript
.netcore+vue 实现压缩文件下载功能
Sep 24 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
德生S2000收音机更换“钕铁硼”全频扬声器
2021/03/02 无线电
destoon各类调用汇总
2014/06/20 PHP
深入理解PHP中的global
2014/08/19 PHP
PHP基于单例模式实现的数据库操作基类
2016/01/15 PHP
javascript中对对层的控制
2006/12/29 Javascript
IE7中javascript操作CheckBox的checked=true不打勾的解决方法
2009/12/07 Javascript
Zero Clipboard js+swf实现的复制功能使用方法
2010/03/07 Javascript
js switch case default 的用法示例介绍
2013/10/23 Javascript
JavaScript实现文字跟随鼠标特效
2015/08/06 Javascript
JS实现仿QQ效果的三级竖向菜单
2015/09/25 Javascript
javascript实现拖放效果
2015/12/16 Javascript
JS+CSS实现的漂亮渐变背景特效代码(6个渐变效果)
2016/03/25 Javascript
第一章之初识Bootstrap
2016/04/25 Javascript
判断是否存在子节点的实现代码
2016/05/18 Javascript
Bootstrap学习笔记之css样式设计(1)
2016/06/07 Javascript
AngularJS基础 ng-keypress 指令简单示例
2016/08/02 Javascript
基于MVC方式实现三级联动(JavaScript)
2017/01/23 Javascript
JavaScript之RegExp_动力节点Java学院整理
2017/06/29 Javascript
jQuery实现base64前台加密解密功能详解
2017/08/29 jQuery
Vue的土著指令和自定义指令实例详解
2018/02/04 Javascript
详解webpack4之splitchunksPlugin代码包分拆
2018/12/04 Javascript
Node.js原生api搭建web服务器的方法步骤
2019/02/15 Javascript
JS实现纵向轮播图(初级版)
2020/01/18 Javascript
python实现文本文件合并
2015/12/29 Python
python pyheatmap包绘制热力图
2018/11/09 Python
Python切片操作去除字符串首尾的空格
2019/04/22 Python
Pandas把dataframe或series转换成list的方法
2020/06/14 Python
如何真正的了解python装饰器
2020/08/14 Python
pytho matplotlib工具栏源码探析一之禁用工具栏、默认工具栏和工具栏管理器三种模式的差异
2021/02/25 Python
阳光体育:Sunny Sports(购买露营和远足设备)
2018/08/07 全球购物
自动化专业毕业生自荐信
2013/11/01 职场文书
建筑总经理岗位职责
2014/02/02 职场文书
营业员岗位职责
2015/02/11 职场文书
大学生创业计划书常用模板
2019/08/07 职场文书
MySQL Server 层四个日志
2022/03/31 MySQL
MySQL中dd::columns表结构转table过程及应用详解
2022/09/23 MySQL