• v-infinite-scroll="loadMore"表示回调函数是loadMore
  • infinite-scroll-disabled="busy"表示由变量busy决定是否执行loadMore,false则执行loadMore,true则不执行,注意,busy表示繁忙,繁忙的时候是不执行的。
  • infinite-scroll-distance="10"这里10决定了页面滚动到离页尾多少像素的时候触发回调函数,10是像素值。一般情况下会在页尾做一个几十像素高的“正在加载中...”,这样的话,可以把这个div的高度设为infinite-scroll-distance的值即可。
  • infinite-scroll-immediate-check 默认值为true,该指令表示,应该在绑定后立即检查busy的值和是否滚动到底。假如你的初始内容高度不够,不足以填满可滚动的容器的话,你应设为true,这样会立即执行一次loadMore,会帮你填充一些初始内容。
  • infinite-scroll-listen-for-event 当事件在Vue实例中发出时,无限滚动将再次检查。
  • infinite-scroll-throttle-delay 检查busy的值的时间间隔,默认值是200,因为vue-infinite-scroll的基础原理是,vue-infinite-scroll会循环检查busy的值,以及是否滚动到底,只有当:busy为false且滚动到底,回调函数才会执行

  1.重复加载。初次进入列表页,会加载两次或者多次数据,造成重复加载的原因,罪魁祸首是 infinite-scroll-disabled,在 loadMore 方法里 有一句 this.loading = true,把  infinite-scroll-disabled 的值设置为了true,它的作用就是,当你进入页面是,会检查如果第一次请求的数据没有撑满你的容器(list-data),就会立即再次执行 v-infinite-scroll 绑定的方法(loadMore),第二次没有撑满,会执行第三次

  解决方法:

  页面初始加载时在created里获取初始数据data紧接着判断data.length>=rows 这里的rows为一页要显示的数据量满足条件则busy置为false(定义时busy为true)

  • 如果要用数据对容器进行填充,那么必须设置容器高度 也可以是屏幕高度,不然无法触发loadMore事件
  • 在进行异步请求之前,需要调用this.busy= true, 数据请求完成后 再设置 this.busy = false(放在axios请求的外面,避免不断重复加载的现象)

v-infinite-scroll无限滚动的更多相关文章

  1. Infinite Scroll–无限分页

    一.前言 现在有很多网站都有这样的交互 1.当你往下浏览页面时,页面会自动去异步加载数据. 无限分页效果 infinite scroll 效果图 –ifxoxo.com 2.在页面下方有一个“点击加载 ...

  2. Infinite Scroll - jQuery & WP 无限滚动插件

    无限滚动(Infinite Scroll)也称为自动分页.滚动分页和无限分页.常用在图片.文章或其它列表形式的网页中,用来在滚动网页的时候自动加载下一页的内容.Infinite Scroll  这款  ...

  3. Unity3d—做一个年月日选择器(Scroll Rect拖动效果优化)— 无限滚动 + 锁定元素

    最近..... 废话不多说上效果图 用的是UGUI 我先说思路 通过判断元素的位置信息来改变Hierarchy的顺序 实现无限滚动 改变位置的同时也要不断的调整Content的位置防止乱跳 元素锁定就 ...

  4. 10 个 jQuery 的无限滚动的插件:

    很多社交网站都使用了一些新技术来提高用户体验,而无限滚动的翻页技术就是其中一项,当你页面滑到列表底部时候无需点击就自动加载更多的内容. 下面为你推荐 10 个 jQuery 的无限滚动的插件: 1.  ...

  5. 10款无限滚动自动翻页jquery插件

    2012年3月29日 无限滚动自动翻页可以说是web2.0时代的一项堪称伟大的技术,它让我们在浏览页面的时候只需要把滚动条拉到网页底部就能自动显示下一页的 结果,改变了一直以来只能通过点击下一页来翻页 ...

  6. (转)15个非常棒的jQuery无限滚动插件【瀑布流效果】

    原文地址:http://www.cnblogs.com/lyw0301/archive/2013/06/19/3145084.html 现在,最热门的网站分页趋势之一是jQuery的无限滚动(也即瀑布 ...

  7. jquery实现无限滚动瀑布流实现原理

    现在类似于pinterest这类的表现效果很火,其实我比较中意的是他的布局效果,而不是那种瀑布流. 虽然我不是特别喜欢这种瀑布流的表现样式,但是还是写了几篇关于无限滚动瀑布流效果的文章,Infinit ...

  8. 15个非常棒的jQuery无限滚动插件【瀑布流效果】

    现在,最热门的网站分页趋势之一是jQuery的无限滚动(也即瀑布流).如果你碰巧观察Pinterest的网站,如Facebook,Twitter和deviantART的,你会发现无限滚动的动作,当旧的 ...

  9. Xamarin.Forms: 无限滚动的ListView(懒加载方式)

    说明 在本博客中,学习如何在Xamarin.Forms应用程序中设计一个可扩展的无限滚动的ListView.这个无限滚动函数在默认的Xamarin.Forms不存在,因此我们需要为此添加插件.在这里我 ...

  10. infinite scroll blogs

    infinite scroll blogs 无限滚动 blogs beacon api https://www.sitepoint.com/introduction-beacon-api/ Histo ...

随机推荐

  1. 【FAQ】应用内支付服务无法拉起支付页面常见原因分析和解决方法

    华为应用内支付服务(In-App Purchases)通过简便的接入流程为用户提供良好的应用内支付体验,然而在实际接入过程中,有一些开发者反馈测试时会无法正常拉起支付页面,下文将详细分析问题出现的5种 ...

  2. 【New】Code Insertion

    #include <bits/stdc++.h> using namespace std; #define Multicase() for(int T = read() ; T ; T-- ...

  3. devops-4:Jenkins基于k8s cloud和docker cloud动态增减节点

    Jenkins管理动态节点 上文介绍Jenkins增加静态agent的步骤,除了静态增加外,还有动态管理的功能,两者最大的差异在于动态可以在有job运行时,临时加入一个agent到jenkins ma ...

  4. selenium webDriver的运用

    声明实例运行浏览器 配置浏览器驱动后,可以通过简单的2行代码就可以驱动浏览器(配置这里不加赘述) from selenium import webdriver driver = webdriver.C ...

  5. 43%非常看好TypeScript…解读“2022前端开发者现状报告”

    摘要:近日,The Software House 发布了"2022前端开发者现状报告",笔者在此对报告内容进行解读,供大家参考. 本文分享自华为云社区<"2022前 ...

  6. 化整为零优化重用,Go lang1.18入门精炼教程,由白丁入鸿儒,go lang函数的定义和使用EP07

    函数是基于功能或者逻辑进行聚合的可复用的代码块.将一些复杂的.冗长的代码抽离封装成多个代码片段,即函数,有助于提高代码逻辑的可读性和可维护性.不同于Python,由于 Go lang是编译型语言,编译 ...

  7. Lua环境搭建编译[Lua5.2+VS2010]

    这里是我编译的和一个测试Demo:http://download.csdn.net/detail/allh45601/6783653 大家如果看我下边说的不是很清楚,可以下载这个具体工程: 群:103 ...

  8. 学习ASP.NET Core Blazor编程系列二——第一个Blazor应用程序(上)

    学习ASP.NET Core Blazor编程系列一--综述 一.概述 Blazor 是一个生成交互式客户端 Web UI 的框架: 使用 C# 代替 JavaScript 来创建信息丰富的交互式 U ...

  9. 基于Vue3实现一个前端埋点上报插件并打包发布到npm

    前端埋点对于那些营销活动的项目是必须的,它可以反应出用户的喜好与习惯,从而让项目的运营者们能够调整策略优化流程提高用户体验从而获取更多的$.这篇文章将实现一个Vue3版本的埋点上报插件,主要功能有 通 ...

  10. 状态 :睡眠中,进程ID:13431,yum提示Another app is currently holding the yum lock; waiting for it to exit...

    问题描述: 今天想在虚拟机上重新安装docker然后使用到yum命令报错: 解决办法: [root@localhost ~]# rm -f /var/run/yum.pid 然后重新运行刚才的yum命 ...