业务逻辑涉及loadmore,filter和tab切换,框架是vue,使用vue-infinite-loading中的一点经历。
identifier 一开始并没有重视这个参数,只是他的官网说identifier适用tab切换,filter。但因为初次使用一开始并没有使用,导致遇到很多坑。
坑主要集中在,切换状态后infinite组件并没有刷新数据,一开始做的逻辑是 组件使用v-show控制状态,mouted加载数据,然后infinite组件做loadmore,
之后有改成v-if控制组件重启加载,这也只是解决了一部分bug,但是还是有问题,因为状态切换的初始数据需要单独做,当v-if加载infinite组件,导致会加载重复数据,
最后才使用identifier属性,因为infinite放在一个组件中,所以identifier数据需要computed监听否则,props的数据并没有更新。
还有就是 tab切换的时候需要把infinite的数据清空,否则会不能触发加载,如果高度够的话

vue-infinite-loading 过滤器tab正确使用的更多相关文章

  1. vue教程2-06 过滤器

    vue教程2-06 过滤器 过滤器: vue提供过滤器: capitalize uppercase currency.... <div id="box"> {{msg| ...

  2. vue打包后显示空白正确处理方法

    vue打包后显示空白正确处理方法是 1.找到配置文件(js与css加载不上) 修改 这样打包处理可以打开但是页面样式会找不到 2.修改(针对css中的图片加载不上) 找到对应的位置加上publicPa ...

  3. Vue学习之过滤器和自定义指令小结(三)

    过滤器: 过滤是一个数据经过了这个过滤之后出来另一样东西,可以是从中取得你想要的,或者给那个数据添加点什么装饰.过滤器就是过滤用的工具.渲染数据用的!!! 我们需要知道的是: 1.Vue中的过滤器不能 ...

  4. 黑马vue---28、vue中全局过滤器的基本使用

    黑马vue---28.vue中全局过滤器的基本使用 一.总结 一句话总结: vue中的过滤器可以传递参数(根据参数来过滤),也可以用管道符拼接多个过滤器:例如<p>{{ msg | msg ...

  5. 第二章 Vue快速入门-- 24 过滤器-Vue中全局过滤器的基本使用

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  6. Vue 中的过滤器的使用

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. vue.js之过滤器,自定义指令,自定义键盘信息以及监听数据变化

    一.监听数据变化 1.监听数据变化有两种,深度和浅度,形式如下: vm.$watch(name,fnCb); //浅度 vm.$watch(name,fnCb,{deep:true}); //深度监视 ...

  8. vue 日期时间过滤器

    来自:https://blog.csdn.net/m0_37068028/article/details/72898154 侵删 来自:https://segmentfault.com/a/11900 ...

  9. vue学习目录 vue初识 this指向问题 vue组件传值 过滤器 钩子函数 路由 全家桶 脚手架 vuecli element-ui axios bus

    vue学习目录 vue学习目录 Vue学习一之vue初识 Vue学习二之vue结合项目简单使用.this指向问题 Vue学习三之vue组件 Vue学习四之过滤器.钩子函数.路由.全家桶等 Vue学习之 ...

随机推荐

  1. winform应用如何发布(不用打包)、并提醒用户自动更新

    环境:VS2019 community  C#  winform 应用程序 设计应用程序界面 编写对应代码 使用PS设计程序标识ICON F4打开属性: 设置ICON 设置背景 打开项目属性 打开“发 ...

  2. Mysql索引优化简单介绍

    一.关于MySQL联合索引 总结记录一下关于在MySQL中使用联合索引的注意事项. 如:索引包含表中每一行的last_name.first_name和dob列,即key(last_name, firs ...

  3. LeetCode 126. Word Ladder II 单词接龙 II(C++/Java)

    题目: Given two words (beginWord and endWord), and a dictionary's word list, find all shortest transfo ...

  4. Algorithms - Insertion Sort - 插入排序

    Insertion Sort - 插入排序 插入排序算法的 '时间复杂度' 是输入规模的二次函数, 深度抽象后表示为, n 的二次方. import time, random F = 0 alist ...

  5. css 纯css自适应页面 示例

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  6. ELF文件之一——

    ELF文件整体布局 下图是后来例子中main.o和main.elf的布局. 其中,只有elf header的位置是固定的,固定在文件开始,其它部分的位置都不确定. 比如下面的main.o布局中,.te ...

  7. Centos7 LVM扩容实例

    Centos7 lvm 扩容与以往版本有所不同   1.插入硬盘,我是在虚拟机上做的测试  直接添加一块5G的硬盘   2.系统读取硬盘信息     # echo "- - -" ...

  8. mysql 启动,停止,重启

    启动mysql: 方式一:sudo /etc/init.d/mysql start  方式二:sudo start mysql 方式三:sudo service mysql start sudo ./ ...

  9. 惊讶!缓存刚Put再Get居然获取不到?

    最近一直在老家远程办公,微信突然响了下,有同事说遇到了一个奇怪的问题,让我帮忙看下. 现象就是标题所说的缓存获取不到的问题,我一听感觉这个问题挺有意思的,决定一探究竟. 下面给出部分代码还原下案发现场 ...

  10. codewars--js--the highest and lowest number + JS 字符串和数组相关知识

    本文参考: http://blog.csdn.net/tyrionj/article/details/78653426 http://www.runoob.com/jsref/jsref-obj-st ...