Vue 无限滚动加载指令实现方法


Posted in Javascript onMay 28, 2019

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

计算公式提简单的   底部等于(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/

总结

以上所述是小编给大家介绍的Vue 无限滚动加载指令实现方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
JS.elementGetStyle(element, style)应用示例
Sep 24 Javascript
JS判断客户端是手机还是PC的2个代码
Apr 12 Javascript
JS实现图片无间断滚动代码汇总
Jul 30 Javascript
jQuery搜索同辈元素方法
Feb 10 Javascript
jQuery实现在列表的首行添加数据
May 19 Javascript
js 动态生成json对象、时时更新json对象的方法
Dec 02 Javascript
微信公众号 摇一摇周边功能开发
Dec 08 Javascript
微信小程序实现MUI数字输入框效果
Jan 31 Javascript
webpack-dev-server远程访问配置方法
Feb 22 Javascript
解决vue接口数据赋值给data没有反应的问题
Aug 27 Javascript
在Create React App中使用CSS Modules的方法示例
Jan 15 Javascript
分享8个JavaScript库可更好地处理本地存储
Oct 12 Javascript
vue实现搜索过滤效果
May 28 #Javascript
微信小程序 image组件遇到的问题
May 28 #Javascript
vue实现搜索功能
May 28 #Javascript
Bootstrap 时间日历插件bootstrap-datetimepicker配置与应用小结
May 28 #Javascript
如何实现双向绑定mvvm的原理实现
May 28 #Javascript
vue实现带复选框的树形菜单
May 27 #Javascript
vue实现按需加载组件及异步组件功能
May 27 #Javascript
You might like
PHP可逆加密/解密函数分享
2012/09/25 PHP
Zend Framework教程之Zend_Layout布局助手详解
2016/03/04 PHP
php使用高斯算法实现图片的模糊处理功能示例
2016/11/11 PHP
PHP 中常量的知识整理
2017/04/14 PHP
phpMyAdmin无法登陆的解决方法
2017/04/27 PHP
Laravel框架基于ajax和layer.js实现无刷新删除功能示例
2019/01/17 PHP
JS解析XML的实现代码
2009/11/12 Javascript
js获取form的方法
2015/05/06 Javascript
JavaScript获取表格(table)当前行的值、删除行、增加行
2015/07/03 Javascript
实例讲解jQuery中对事件的命名空间的运用
2016/05/24 Javascript
微信小程序 wx.uploadFile在安卓手机上面the same task is working问题解决
2016/12/14 Javascript
JavaScript数据类型的存储方法详解
2017/08/25 Javascript
关于JavaScript语句后面的分号问题
2017/12/07 Javascript
JS实现图片居中悬浮效果
2017/12/25 Javascript
vue-cli3 karma单元测试的实现
2019/01/18 Javascript
JavaScript 面向对象基础简单示例
2019/10/02 Javascript
JavaScript实现前端倒计时效果
2021/02/09 Javascript
初步解析Python中的yield函数的用法
2015/04/03 Python
Python实时获取cmd的输出
2015/12/13 Python
python实现将读入的多维list转为一维list的方法
2018/06/28 Python
Python实现定时自动关闭的tkinter窗口方法
2019/02/16 Python
Python3标准库总结
2019/02/19 Python
Python操作Excel工作簿的示例代码(\*.xlsx)
2020/03/23 Python
英国足球店:UK Soccer Shop
2017/11/19 全球购物
如何用JQuery进行表单验证
2013/05/29 面试题
资深地理教师自我评价
2013/09/21 职场文书
个人求职信范例
2014/01/29 职场文书
租房协议书范文
2014/08/20 职场文书
学校周年庆活动方案
2014/08/22 职场文书
国庆横幅标语
2014/10/08 职场文书
党的群众路线教育实践活动整改落实情况报告
2014/10/28 职场文书
项目经理岗位职责范本
2015/04/01 职场文书
2015年幼儿园学期工作总结
2015/05/22 职场文书
运动会通讯稿600字
2015/07/20 职场文书
MySQL的Query Cache图文详解
2021/07/01 MySQL
Redis分布式锁的7种实现
2022/04/01 Redis