浅谈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类和继承 this属性使用说明
Sep 03 Javascript
js清理Word格式示例代码
Feb 13 Javascript
Javascript的setTimeout()使用闭包特性时需要注意的问题
Sep 23 Javascript
深入理解JavaScript系列(43):设计模式之状态模式详解
Mar 04 Javascript
JavaScript实现自动弹出窗口并自动关闭窗口的方法
Aug 06 Javascript
jquery事件的ready()方法使用详解
Nov 11 Javascript
JavaScript跨域调用基于JSON的RESTful API
Jul 09 Javascript
JS访问DOM节点方法详解
Nov 29 Javascript
jQuery.parseHTML() 函数详解
Jan 09 Javascript
使用JS获取SessionStorage的值
Jan 12 Javascript
VUE2.0+ElementUI2.0表格el-table实现表头扩展el-tooltip
Nov 30 Javascript
深入理解 TypeScript Reflect Metadata
Dec 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+MYSQL的文章管理系统(二)
2006/10/09 PHP
php 更新数据库中断的解决方法
2009/06/05 PHP
PHP的压缩函数实现:gzencode、gzdeflate和gzcompress的区别
2016/01/27 PHP
php常用字符函数实例小结
2016/12/29 PHP
Code:loadScript( )加载js的功能函数
2007/02/02 Javascript
【消息提示组件】,兼容IE6/7&amp;&amp;FF2
2007/09/04 Javascript
jQuery EasyUI API 中文文档 - Documentation 文档
2011/09/29 Javascript
5个最佳的Javascript日期处理类库分享
2012/04/15 Javascript
JS中for循序中延迟加载动态效果的具体实现
2013/08/18 Javascript
jQuery统计上传文件大小的方法
2015/01/24 Javascript
jQuery实现返回顶部效果的方法
2015/05/29 Javascript
js鼠标点击按钮切换图片-图片自动切换-点击左右按钮切换特效代码
2015/09/02 Javascript
AngularJS入门教程之路由与多视图详解
2016/08/19 Javascript
js querySelector() 使用方法
2016/12/21 Javascript
bootstrap-Treeview实现级联勾选
2017/11/23 Javascript
微信小程序wx.request实现后台数据交互功能分析
2017/11/25 Javascript
vue插件实现v-model功能
2018/09/10 Javascript
layer弹出层倒计时关闭的实现方法
2019/09/27 Javascript
vue props对象validator自定义函数实例
2019/11/13 Javascript
解决vue cli4升级sass-loader(v8)后报错问题
2020/07/30 Javascript
Python自定义scrapy中间模块避免重复采集的方法
2015/04/07 Python
简单谈谈Python中的几种常见的数据类型
2017/02/10 Python
Django中redis的使用方法(包括安装、配置、启动)
2018/02/21 Python
Python+OpenCV目标跟踪实现基本的运动检测
2018/07/10 Python
Django中自定义模型管理器(Manager)及方法
2019/09/23 Python
Python+numpy实现矩阵的行列扩展方式
2019/11/29 Python
Python 实现将某一列设置为str类型
2020/07/14 Python
python Xpath语法的使用
2020/11/26 Python
python制作抽奖程序代码详解
2021/01/15 Python
澳大利亚家具和家居用品在线商店:Interiors Online
2018/03/05 全球购物
主题婚礼策划方案
2014/02/10 职场文书
校园安全标语
2014/06/07 职场文书
努力工作保证书
2015/02/28 职场文书
民事代理词范文
2015/05/25 职场文书
学校团代会开幕词
2016/03/04 职场文书
MySQL池化框架学习接池自定义
2022/07/23 MySQL