浅谈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 相关文章推荐
Jquery图片延迟加载插件jquery.lazyload.js的使用方法
May 21 Javascript
JS模式之单例模式基本用法
Jun 30 Javascript
html5+javascript实现简单上传的注意细节
Apr 18 Javascript
Bootstrap Metronic完全响应式管理模板之菜单栏学习笔记
Jul 08 Javascript
使用jQuery实现动态添加小广告
Jul 11 jQuery
JavaScript实现的浏览器下载文件的方法
Aug 09 Javascript
ReactNative中使用Redux架构总结
Dec 15 Javascript
Vue中v-show添加表达式的问题(判断是否显示)
Mar 26 Javascript
JavaScript函数IIFE使用详解
Oct 21 Javascript
JavaScript定时器常见用法实例分析
Nov 15 Javascript
解决 window.onload 被覆盖的问题方法
Jan 14 Javascript
如何利用 JS 脚本实现网页全自动秒杀抢购功能
Oct 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
ThinkPHP5 验证器的具体使用
2018/05/31 PHP
js根据给定的日期计算当月有多少天实现思路及代码
2013/02/25 Javascript
js验证整数加保留小数点的简单实例
2013/12/02 Javascript
js/jQuery简单实现选项卡功能
2014/01/02 Javascript
JS中数组Array的用法示例介绍
2014/02/20 Javascript
JS实现5秒钟自动封锁div层的方法
2015/02/20 Javascript
详解支持Angular 2的表格控件
2017/01/19 Javascript
fullPage.js和CSS3实现全屏滚动效果
2017/05/05 Javascript
VUE利用vuex模拟实现新闻点赞功能实例
2017/06/28 Javascript
详解Angular5 服务端渲染实战
2018/01/04 Javascript
详解使用jest对vue项目进行单元测试
2018/09/07 Javascript
vue中promise的使用及异步请求数据的方法
2018/11/08 Javascript
重学JS 系列:聊聊继承(推荐)
2019/04/11 Javascript
使用Vue中 v-for循环列表控制按钮隐藏显示功能
2019/04/23 Javascript
如何在postman中添加cookie信息步骤解析
2020/06/30 Javascript
Angular利用HTTP POST下载流文件的步骤记录
2020/07/26 Javascript
[03:27]最受玩家喜爱奖提名:PZH_Element 致玩家寄语
2016/12/20 DOTA
利用python获得时间的实例说明
2013/03/25 Python
python中正则表达式的使用详解
2014/10/17 Python
在Python中使用mechanize模块模拟浏览器功能
2015/05/05 Python
Python中函数参数调用方式分析
2018/08/09 Python
如何用Python制作微信好友个性签名词云图
2019/06/28 Python
Python如何定义接口和抽象类
2020/07/28 Python
python 两种方法修改文件的创建时间、修改时间、访问时间
2020/09/26 Python
python 利用百度API识别图片文字(多线程版)
2020/12/14 Python
在Ubuntu中安装并配置Pycharm教程的实现方法
2021/01/06 Python
详解tf.device()指定tensorflow运行的GPU或CPU设备实现
2021/02/20 Python
Myprotein加拿大官网:欧洲第一的运动营养品牌
2018/01/06 全球购物
机修工工作职责
2014/02/21 职场文书
青春奉献演讲稿
2014/05/08 职场文书
暑期政治学习心得体会
2014/09/02 职场文书
2014年质量管理工作总结
2014/12/01 职场文书
小学班主任工作随笔
2015/08/15 职场文书
基于JavaScript实现省市联动效果
2021/06/22 Javascript
梳理总结Python开发中需要摒弃的18个坏习惯
2022/01/22 Python
JavaScript最完整的深浅拷贝实现方式详解
2022/02/28 Javascript