也不存在什么加载咯, 就是一个判断滚动条是否到达浏览器底部了。 如果到了就触发事件,米到就不处理。

计算公式提简单的   底部等于(0) =  滚动条高度 - 滚动条顶部距离 - 可视高度。  反正结果就是0。

一、获取滚动条位置

class Scroll {static get top() {return Math.max(document.documentElement.scrollTop || document.body.scrollTop);}static get clientHeight() {return Math.max(document.documentElement.clientHeight || document.body.clientHeight);}static get clientWidth() {return Math.max(document.documentElement.clientWidth || document.body.clientWidth);}static get height() {return Math.max(document.documentElement.scrollHeight || document.body.scrollHeight);}static get width() {return Math.max(document.documentElement.scrollWidth || document.body.scrollWidth);}static get bottom() {return Scroll.height - Scroll.clientHeight - Scroll.top;}
}

二、给根节点绑定滚动事件

vue给body元素绑定滚动条事件,真TMD草蛋。事件绑定上去了 妈的 就是不触发事件。不知道什么鬼问题。

最后直接给根节点HTML绑定滚动事件。

const on = (function () {if (document.addEventListener) {return function (element, event, handler) {if (element && event && handler) {element.addEventListener(event, handler, false);}};} else {return function (element, event, handler) {if (element && event && handler) {element.attachEvent('on' + event, handler);}};}
})();

三、注册全局指令

/*** 降低事件执行频率*/
const downsampler = (function () {let result = null;return function (time, func) {if (!result) {result = setTimeout(function () {func();result = null;}, time);}}
})();

Vue.directive("infinite-scroll", {bind(el, binding, vnode) {on(window, 'scroll', function () {if (typeof binding.value === "function" && Scroll.bottom <= 50) {   // 小于50就触发downsampler(50, binding.value);  // 降低触发频率
            }})}
});

四、实例:

<div class="app" v-infinite-scroll="coupon"><template v-for="item in goods"><p>{{item}}</p></template>
</div>

        let v = new Vue({el: ".app",data(){return {goods:[]}},methods: {coupon() {this.goods.push("你呵呵")}}})

演示地址:http://whnba.gitee.io/tkspa/

转载于:https://www.cnblogs.com/whnba/p/10775118.html

Vue 无限滚动加载指令相关推荐

  1. 基于 Vue.js 的移动端组件库mint-ui实现无限滚动加载更多

    通过多次爬坑,发现了这些监听滚动来加载更多的组件的共同点, 因为这些加载更多的方法是绑定在需要加载更多的内容的元素上的, 所以是进入页面则直接触发一次,当监听到滚动事件之后,继续加载更多, 所以对于无 ...

  2. vue 滑动加载列表 php,通过原生vue添加滚动加载更多功能

    这篇文章主要介绍了通过原生vue添加滚动加载更多功能,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 vue中添加滚动加载更多,因为是单页面所以需要在 ...

  3. 无限滚动加载最佳实践

    无限滚动加载最佳实践 无限滚动(Infinite scrolling),有时候被称为无尽滚动(endless scrolling),这种技术允许用户在大量内容上滚动,眼中看不到结束的地方.这种技术很简 ...

  4. php 无限滚动加载,无限滚动,_无限滚动加载数据问题,无限滚动 - phpStudy

    无限滚动加载数据问题 做移动端程序的时候,经常会遇到无限滚动的功能,通常实现无限滚动的方式是页面滚动到底部后出发一个ajax请求,后端返回数据然后动态追加DOM,但是如果DOM结构很复杂,追加的时候拼 ...

  5. vue2.0无限滚动加载数据插件

      做vue项目用到下拉滚动加载数据功能,由于选的UI库(element)没有这个组件,就用Vue-infinite-loading 这个插件代替,使用中遇到的一些问题及使用方法,总结作记录! 安装: ...

  6. vue页面滚动加载、页面懒加载

    需求:页面有一堆图表.需要滚动到图表时.再加载出来这个图表. 思路:没找到合适的插件.只能自己手撸一个.直接放到混入里就行.主要就是判断元素距离底部的距离和可视区域内容的高度进行对比即可 /*** 判 ...

  7. Vue组件滚动加载、懒加载功能的实现,无限滚动加载组件实例演示

    效果图如下: 可以看到随着不断的滚动,页面组件的数量不断的加载. 其实加载的是后端返回的数据,因为涉及隐私,没有给显示出来. 利用懒加载,可以防止大量渲染造成卡顿降低用户体验. 页面的动态加载这块可以 ...

  8. AngularJS 无限滚动加载数据控件 ngInfiniteScroll

    为什么80%的码农都做不了架构师?>>>    1.什么是 InfiniteScroll?  无限滚动(Infinite Scroll)也称为自动分页.滚动分页和无限分页.常用在图片 ...

  9. 【译】无限滚动加载最佳实践

    本文转载自:众成翻译 译者:文蔺 链接:http://www.zcfy.cc/article/673 原文:https://uxplanet.org/infinite-scrolling-best-p ...

  10. Infinite-Scroll无限滚动加载数据

    无限滚动的实现原理:当滚动条到底离网页底部一定长度的时候,向后台发送页数并获取数据. 首先我们在页面上先放置10条数据,即第一页,每一项都是p标签: <div id="content& ...

最新文章

  1. linux顺序合并多个文件,linux – 合并多个文件,保留unix中的原始序列
  2. 树莓派_FTP服务器的搭建
  3. 022_Jedis的事物
  4. 3.4 改进集束搜索-深度学习第五课《序列模型》-Stanford吴恩达教授
  5. viper4android fxifi,ViPer4android. FX顶级音效!
  6. 好看的扁平化大气IT个人简历网页模板
  7. Gin实践 番外 Golang交叉编译
  8. 系统调用被信号打断的例子
  9. MySQL索引原理及慢查询优化
  10. Android学习Tabhost、gallery、listview、imageswitcher
  11. 线程池的实现原理分析
  12. 在mysql中 创建视图需要使用_语句_在MySQL中创建视图的X种方式
  13. MAC版SecureCRT+SecureFX 安装说明
  14. 使用Scrapy爬取电影链接
  15. 一篇文章看懂Facebook和新浪微博的智能FEED
  16. 操作系统:存储器管理(下)
  17. 如何使用开源工具「DataEase」制作一个高质量的仪表板
  18. 斐波那契数列详细解法
  19. Cocos Creator Android 平台 Google 原生登录
  20. canvas实现高斯模糊

热门文章

  1. 软硬件融合新时代——让软件够灵活,硬件够高效,鱼和熊掌可兼得
  2. 3.1 tensorflow2实现brown-mood中位数检验法——python实战
  3. numpy线性代数基础 - Python和MATLAB矩阵处理的不同
  4. Android布局文件xml
  5. pip 源使用阿里云镜像加速
  6. 中文停用词文档_实战:朴素贝叶斯对文档进行分类
  7. php 顺序排序,PHP顺序排序
  8. mysql.5.7 linux_mysql 5.7 linux下的安装
  9. L1-035 情人节 (15 分)—团体程序设计天梯赛
  10. L1-016 查验身份证 (15 分) — 团体程序设计天梯赛