浅谈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 相关文章推荐
关于Blog顶部的滚动导航条代码
Sep 25 Javascript
JS中Iframe之间传值的方法
Mar 11 Javascript
jquery中常用的SET和GET$(”#msg”).html循环介绍
Oct 09 Javascript
JavaScript File API文件上传预览
Feb 02 Javascript
js中遍历Map对象的简单实例
Aug 08 Javascript
JavaScript SHA1加密算法实现详细代码
Oct 06 Javascript
Vue.js:使用Vue-Router 2实现路由功能介绍
Feb 22 Javascript
详解vue表单验证组件 v-verify-plugin
Apr 19 Javascript
vue实现手机号码的校验实例代码(防抖函数的应用场景)
Sep 05 Javascript
vue项目创建步骤及路由router
Jan 14 Javascript
vuex实现购物车功能
Jun 28 Javascript
JavaScript日期库date-fn.js使用方法解析
Sep 09 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和ACCESS写聊天室(九)
2006/10/09 PHP
PHP 函数语法介绍一
2009/06/14 PHP
php实现memcache缓存示例讲解
2013/12/04 PHP
ThinkPHP中自定义目录结构的设置方法
2014/08/15 PHP
ThinkPHP上使用多说评论插件的方法
2014/10/31 PHP
js处理自己不能定义二维数组的方法详解
2014/03/03 Javascript
显示今天的日期js代码(阳历和农历)
2014/09/30 Javascript
javascript跑马灯抽奖实例讲解
2020/04/17 Javascript
JavaScript 消息框效果【实现代码】
2016/04/27 Javascript
详解获取jq ul第一个li定位的四种解决方案
2016/11/23 Javascript
bootstrap输入框组件使用方法详解
2017/01/19 Javascript
JS匹配日期和时间的正则表达式示例
2017/05/12 Javascript
node.js中TCP Socket多进程间的消息推送示例详解
2018/07/10 Javascript
解决Vue 刷新页面导航显示高亮位置不对问题
2019/12/25 Javascript
Vue通过getAction的finally来最大程度避免影响主数据呈现问题
2020/04/24 Javascript
vue 出现data-v-xxx的原因及解决
2020/08/04 Javascript
解决Can't find variable: SockJS vue项目的问题
2020/09/22 Javascript
[02:41]2015国际邀请赛中国区预选赛观战指南
2015/05/20 DOTA
python爬虫入门教程之点点美女图片爬虫代码分享
2014/09/02 Python
Windows系统下安装Python的SSH模块教程
2015/02/05 Python
python2.7实现FTP文件下载功能
2018/04/15 Python
Python实现自定义顺序、排列写入数据到Excel的方法
2018/04/23 Python
python 将print输出的内容保存到txt文件中
2018/07/17 Python
Flask框架URL管理操作示例【基于@app.route】
2018/07/23 Python
django数据模型on_delete, db_constraint的使用详解
2019/12/24 Python
python 实现将list转成字符串,中间用空格隔开
2019/12/25 Python
基于Python3.6中的OpenCV实现图片色彩空间的转换
2020/02/03 Python
DAWGS鞋官方网站:鞋,凉鞋,靴子
2016/10/04 全球购物
世界上最好的威士忌和烈性酒购买网站:The Whisky Exchange
2016/11/20 全球购物
AVIS安飞士奥地利租车官网:提供奥地利、欧洲和全世界汽车租赁
2016/11/29 全球购物
党校培训思想汇报
2013/12/30 职场文书
大学生职业生涯规划范文
2014/01/22 职场文书
计算机网络专业求职信
2014/06/05 职场文书
交通志愿者活动总结
2014/06/27 职场文书
2015届本科毕业生自我鉴定
2014/09/27 职场文书
2015年教学副校长工作总结
2015/07/22 职场文书