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 相关文章推荐
符合W3C网页标准的iframe标签的使用方法
Jul 19 Javascript
js可突破windows弹退效果代码
Aug 09 Javascript
如何将JS的变量值传递给ASP变量
Dec 10 Javascript
animate动画示例(泪奔的小孩)及stop和delay的使用
May 06 Javascript
批量实现面向对象的实例代码
Jul 01 Javascript
利用javascript实现禁用网页上所有文本框,下拉菜单,多行文本域
Dec 14 Javascript
JS设置网页图片vspace和hspace属性的方法
Apr 01 Javascript
AngularJs Modules详解及示例代码
Sep 01 Javascript
浅谈jquery.form.js的ajaxSubmit和ajaxForm的使用
Sep 09 Javascript
使用jQuery实现页面定时弹出广告效果
Aug 24 jQuery
JS获取指定月份的天数两种实现方法
Jun 22 Javascript
Vue项目自动转换 px 为 rem的实现方法
Oct 29 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制作静态网站的模板框架(四)
2006/10/09 PHP
php下用GD生成生成缩略图的两个选择和区别
2007/04/17 PHP
Ext.data.PagingMemoryProxy分页一次性读取数据的实现代码
2010/04/07 PHP
一个漂亮的php验证码类(分享)
2013/08/06 PHP
php命令行(cli)下执行PHP脚本文件的相对路径的问题解决方法
2015/05/25 PHP
laravel 根据不同组织加载不同视图的实现
2019/10/14 PHP
JS 动态获取节点代码innerHTML分析 [IE,FF]
2009/11/30 Javascript
js escape,unescape解决中文乱码问题的方法
2010/05/26 Javascript
jquery remove方法应用详解
2012/11/22 Javascript
禁用页面部分JavaScript方法的具体实现
2013/07/31 Javascript
javascript确认框的三种使用方法
2013/12/17 Javascript
浮动的div自适应居中显示的js代码
2013/12/23 Javascript
Javascript 学习笔记之 对象篇(二) : 原型对象
2014/06/24 Javascript
Node.js 去掉种子(torrent)文件里的邪恶信息
2015/03/27 Javascript
使用AngularJS实现表单向导的方法
2015/06/19 Javascript
javascript Slip.js实现整屏滑动的手机网页
2015/11/25 Javascript
详解微信小程序开发—你期待的分享功能来了,微信小程序序新增5大功能
2016/12/23 Javascript
巧用canvas
2017/01/21 Javascript
weex里Vuex state使用storage持久化详解
2017/09/09 Javascript
jQuery实现切换隐藏与显示同时切换图标功能
2017/10/29 jQuery
React Native 搭建开发环境的方法步骤
2017/10/30 Javascript
基于react后端渲染模板引擎noox发布使用
2018/01/11 Javascript
解决VUE框架 导致绑定事件的阻止冒泡失效问题
2018/02/24 Javascript
Vue中的v-for指令不起效果的解决方法
2018/09/27 Javascript
[02:28]DOTA2英雄基础教程 狼人
2013/12/23 DOTA
[51:44]2018DOTA2亚洲邀请赛 4.3 突围赛 Optic vs iG 第二场
2018/04/04 DOTA
Python版的文曲星猜数字游戏代码
2013/09/02 Python
python模拟登录百度代码分享(获取百度贴吧等级)
2013/12/27 Python
使用Python实现BT种子和磁力链接的相互转换
2015/11/09 Python
Python数据分析之双色球统计单个红和蓝球哪个比例高的方法
2018/02/03 Python
python3 kmp 字符串匹配的方法
2018/07/07 Python
twilio python自动拨打电话,播放自定义mp3音频的方法
2019/08/08 Python
Html5与App的通讯方式详解
2019/10/24 HTML / CSS
大宝sod蜜广告词
2014/03/21 职场文书
西双版纳导游词
2015/02/03 职场文书
大学生先进个人主要事迹材料
2015/11/04 职场文书