浅谈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实现的分页函数
Dec 22 Javascript
一个可绑定数据源的jQuery数据表格插件
Jul 17 Javascript
关于js注册事件的常用方法
Apr 03 Javascript
jQuery的slideToggle方法实例
May 07 Javascript
Flex通过JS获取客户端IP和计算机名的实例代码
Nov 21 Javascript
js实现select下拉框菜单
Dec 08 Javascript
JS闭包与延迟求值用法示例
Dec 22 Javascript
Angular2学习教程之ng中变更检测问题详解
May 28 Javascript
详解vue服务端渲染(SSR)初探
Jun 19 Javascript
通俗解释JavaScript正则表达式快速记忆
Aug 23 Javascript
小程序图片长按识别功能的实现方法
Aug 30 Javascript
JS代码优化的8点建议
Feb 04 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函数addslashes和mysql_real_escape_string的区别
2014/04/22 PHP
Thinkphp框架使用list_to_tree 实现无限级分类列出所有节点示例
2020/04/04 PHP
10个实用的脚本代码工具
2010/05/04 Javascript
强大的jquery插件jqeuryUI做网页对话框效果!简单
2011/04/14 Javascript
Jquery显示和隐藏元素或设为只读(含Ligerui的控件禁用,实例说明介绍)
2013/07/09 Javascript
利用try-catch判断变量是已声明未声明还是未赋值
2014/03/12 Javascript
AngularJS 基础ng-class-even指令用法
2016/08/01 Javascript
微信小程序 标签传入数据
2017/05/08 Javascript
JavaScript之DOM插入更新删除_动力节点Java学院整理
2017/07/03 Javascript
Bootstrap与Angularjs的模态框实例代码
2017/08/03 Javascript
vue.js如何将echarts封装为组件一键使用详解
2017/10/10 Javascript
angularjs 动态从后台获取下拉框的值方法
2018/08/13 Javascript
ES6知识点整理之函数数组参数的默认值及其解构应用示例
2019/04/17 Javascript
Vue实现固定定位图标滑动隐藏效果
2019/05/30 Javascript
详解基于Wepy开发小程序插件(推荐)
2019/08/01 Javascript
[01:41]DOTA2超级联赛专访YYF 称一辈子难忘TI2
2013/05/28 DOTA
python中的hashlib和base64加密模块使用实例
2014/09/02 Python
使用IPython下的Net-SNMP来管理类UNIX系统的教程
2015/04/15 Python
windows下python连接oracle数据库
2017/06/07 Python
Sanic框架配置操作分析
2018/07/17 Python
python列表list保留顺序去重的实例
2018/12/14 Python
python3实现二叉树的遍历与递归算法解析(小结)
2019/07/03 Python
如何用Python来理一理红楼梦里的那些关系
2019/08/14 Python
Python+OpenCV+图片旋转并用原底色填充新四角的例子
2019/12/12 Python
基于Html5实现的语音搜索功能
2019/05/13 HTML / CSS
诗狄娜化妆品官方网站:Stila Cosmetics
2016/12/21 全球购物
德国高尔夫商店:Par71.de
2020/11/29 全球购物
九州传奇上机题
2014/07/10 面试题
高分子材料与工程专业个人求职信
2013/12/15 职场文书
文员的职业生涯规划发展方向
2014/02/08 职场文书
幼儿园春季开学寄语
2014/04/03 职场文书
教师民族团结演讲稿
2014/08/27 职场文书
红色旅游心得体会
2014/09/03 职场文书
教师群众路线教育实践活动个人对照检查材料
2014/11/04 职场文书
班主任工作实习计划
2015/01/16 职场文书
React配置子路由的实现
2021/06/03 Javascript