业务逻辑涉及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. SDL初始化和创建窗口

    //初始化SDL2和创建一个窗口,并且将屏幕绘制成大红色 #include <iostream> extern "C" { #include <SDL.h> ...

  2. CSS颜色表示的几种方式

    在CSS中颜色有很多表示方式,今天列出一些常见的颜色表示方式及它们的用法. ①color:blue;  第一种,调用颜色属性,将颜色的英文输入在冒号后,以分号结束. 这种方法直接了当,但是能表示的颜色 ...

  3. 视觉slam十四讲课后习题ch3--5题

    题目回顾: 假设有一个大的Eigen矩阵,我想把它的左上角3x3块提取出来,然后赋值为I3x3.编程实现.解:提取大矩阵左上角3x3矩阵,有两种方式: 1.直接从0-2循环遍历大矩阵的前三行和三列 2 ...

  4. Codeforces_734_D

    http://codeforces.com/problemset/problem/734/D 保存最近的八个方向的点,判断即可. #include<iostream> #include&l ...

  5. ELK搭建(docker环境)

    ELK是Elasticsearch.Logstash.Kibana的简称,这三者是核心套件,但并非全部. Elasticsearch是实时全文搜索和分析引擎,提供搜集.分析.存储数据三大功能:是一套开 ...

  6. Python常用库 - logging日志库

    logging的简单介绍 用作记录日志,默认分为六种日志级别(括号为级别对应的数值) NOTSET(0) DEBUG(10) INFO(20) WARNING(30) ERROR(40) CRITIC ...

  7. 大神是如何学习 Go 语言之 Channel 实现原理精要

    转自: https://mp.weixin.qq.com/s/ElzD2dXWeldYkJmVVY6Djw 作者Draveness Go 语言中的管道 Channel 是一个非常有趣的数据结构,作为语 ...

  8. Linux相关知识笔记

    Quagga要在linux下编译并配置运行,所有,学习一点linux的基础知识. 安装的Ubuntu,用户名linux,密码1 使能Ubuntu的IP转发功能,需要修改etc/sysctl.conf和 ...

  9. Angular组件通信

    一. 组件间通信(组件间不能互相调用,公共方法放在服务中) (目前项目采用将公共方法直接写在ts文件中没使用服务) ng g service services/服务名 App.module.ts{ 引 ...

  10. 注销Apache

    到D:\phpTools\Apache24\bin下运行cmd 输入httpd.exe -k uninstall -n apache24 回车后提示注销完成 接着把Apache的文件删了即可