浅谈element中InfiniteScroll按需引入的一点注意事项

大家为了节省空间，常常进行按需引入来节省空间，这里我给大家来介绍一下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按需引入内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue按需引入element Transfer 穿梭框

    Transfer 穿梭框 按需引入Transfer 编辑main.js import { ... Transfer } from 'element-ui'; const components = [ ... Transfer ]; components.map(component => { Vue.component(component.name, component); }); 安装transform-vue-jsx 插件 编辑 .babelrc文件 { "presets":

  • element-ui中按需引入的实现

    element-ui中按需引入 为什么选择 element-ui 而不是 iview 因为在多次使用两个组件的过程中慢慢发现,iview 的一些组件还是需要再完善,而 element-ui 现在更加的成熟 所以, 这里我们一起来学习一下在 vue 中按需引入 element-ui 一些组件中的坑(Dialog组件) 这里我们使用的版本是 element-ui : 2.4.7,vue: 2.2.2 1.按需引入 1. 借助 babel-plugin-component,我们可以只引入需要的组件,以

  • 浅谈element中InfiniteScroll按需引入的一点注意事项

    大家为了节省空间,常常进行按需引入来节省空间,这里我给大家来介绍一下element中按需引入无限滚动指令注意的事项. 针对前面element 按需引入的一些配置这里就不再详细介绍了. 那么这里讲的是在main.js写入以下代码. import { InfiniteScroll } from 'element-ui'; Vue.use(InfiniteScroll) 好,这样引入.注册了,那么我们接下来做得事情就是在页面使用它. <template> <ul class="inf

  • 浅谈jQuery中的eq()与DOM中element.[]的区别

    如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <a class="a">#1</a> <a class="a">#2</a>

  • 浅谈Pytorch中的自动求导函数backward()所需参数的含义

    正常来说backward( )函数是要传入参数的,一直没弄明白backward需要传入的参数具体含义,但是没关系,生命在与折腾,咱们来折腾一下,嘿嘿. 对标量自动求导 首先,如果out.backward()中的out是一个标量的话(相当于一个神经网络有一个样本,这个样本有两个属性,神经网络有一个输出)那么此时我的backward函数是不需要输入任何参数的. import torch from torch.autograd import Variable a = Variable(torch.Te

  • 浅谈Redis 中的过期删除策略和内存淘汰机制

    浅谈Redis 中的过期删除策略和内存淘汰机制

    目录 前言 Redis 中 key 的过期删除策略 1.定时删除 2.惰性删除 3.定期删除 Redis 中过期删除策略 从库是否会脏读主库创建的过期键 内存淘汰机制 内存淘汰触发的最大内存 有哪些内存淘汰策略 内存淘汰算法 LRU LFU 为什么数据删除后内存占用还是很高 内存碎片如何产生 碎片率的意义 如何清理内存碎片 总结 参考 前言 Redis 中的 key 设置一个过期时间,在过期时间到的时候,Redis 是如何清除这个 key 的呢? 这来分析下 Redis 中的过期删除策略和内存淘

  • 浅谈Redis 中的过期删除策略和内存淘汰机制

    浅谈Redis 中的过期删除策略和内存淘汰机制

    目录 前言 Redis 中 key 的过期删除策略 1.定时删除 2.惰性删除 3.定期删除 Redis 中过期删除策略 从库是否会脏读主库创建的过期键 内存淘汰机制 内存淘汰触发的最大内存 有哪些内存淘汰策略 内存淘汰算法 LRU LFU 为什么数据删除后内存占用还是很高 内存碎片如何产生 碎片率的意义 如何清理内存碎片 总结 参考 前言 Redis 中的 key 设置一个过期时间,在过期时间到的时候,Redis 是如何清除这个 key 的呢? 这来分析下 Redis 中的过期删除策略和内存淘

  • 浅谈typescript中keyof与typeof操作符用法

    目录 一.keyof 简介 二.keyof 的作用 三.keyof 与对象的数值属性 四.keyof 与 typeof 操作符 一.keyof 简介 TypeScript 允许我们遍历某种类型的属性,并通过 keyof 操作符提取其属性的名称.keyof 操作符是在 TypeScript 2.1 版本引入的,该操作符可以用于获取某种类型的所有键,其返回类型是联合类型.下面我们来看个例子: interface Person {   name: string;   age: number;   lo

  • 浅谈Spring 中 @EnableXXX 注解的套路

    目录 前言 设计目标 @EnableScheduling (导入一个 @Configuration 类) @EnableTransactionManagement(导入一个 ImportSelector) @EnableAspectJAutoProxy (在 Bean 定义层导入) 结论 前言 在 Spring 框架中有很多实用的功能,不需要写大量的配置代码,只需添加几个注解即可开启. 其中一个重要原因是那些 @EnableXXX 注解,它可以让你通过在配置类加上简单的注解来快速地开启诸如事务管

  • 浅谈Angular中ngModel的$render

    浅谈Angular中ngModel的$render

    在我开始着手ngModel的领域时候,有一个问题很令我纠结,那就是$render()到底是做什么的呢?查了很多资料都只是简单的描述一下,这就令我很纠结了,终于在一个阳光明媚的晚上,我终于解决了这个大问题 那么这个$render方法到底是干什么的呢?他的用处就是在$viewValue改变的时候可以重新绑定model数据,但是我们要注意一点($viewValue和DOM节点的value是不同的),我觉得他们的区别有点类似setTimeout和$timeout的区别,但是又不太一样.ps:其实mode

  • 浅谈python中的面向对象和类的基本语法

    浅谈python中的面向对象和类的基本语法

    当我发现要写python的面向对象的时候,我是踌躇满面,坐立不安呀.我一直在想:这个坑应该怎么爬?因为python中关于面向对象的内容很多,如果要讲透,最好是用面向对象的思想重新学一遍前面的内容.这个坑是如此之大,犹豫再三,还是只捡一下重要的内容来讲吧,不足的内容只能靠大家自己去补充了. 惯例声明一下,我使用的版本是 python2.7,版本之间可能存在差异. 好,在开讲之前,我们先思考一个问题,看代码: 为什么我只创建是为 a 赋值,就可以使用一些我没写过的方法? 可能会有小伙伴说:因为 a

  • 浅谈python中的getattr函数 hasattr函数

    hasattr(object, name) 作用:判断对象object是否包含名为name的特性(hasattr是通过调用getattr(ojbect, name)是否抛出异常来实现的). 示例: >>> hasattr(list, 'append') True >>> hasattr(list, 'add') False getattr(object,name,default): 作用:返回object的名称为name的属性的属性值,如果属性name存在,则直接返回其

随机推荐