Vue组件实现触底判断


Posted in Javascript onJune 26, 2019

本文实例为大家分享了Vue组件实现触底判断的具体代码,供大家参考,具体内容如下

非常简陋的代码,以后有空回来完善

子组件代码:

<template>
 <div class="scroll"></div>
</template>
 
<script>
 export default {
 name:'Scroll',
 methods:{
 scrollEvent(){
 if (document.documentElement.scrollTop
      + document.documentElement.clientHeight 
     >= document.body.scrollHeight) {
  this.onBottom();
 }
 }
 },
 props:{
 onBottom:Function
 },
 mounted(){
 window.addEventListener('scroll', this.scrollEvent,false);
 },
 destroyed () {
   window.removeEventListener('scroll', this.scrollEvent,false);
  }
 }
</script>

document.documentElement.scrollTop + document.documentElement.clientHeight >= document.body.scrollHeightb表示已经到页面底部了,那么就触发函数onBottom,函数onBottom是父组件传递过来的用于回调的函数 

父组件代码:

把子组件scroll放在父组件的底部(切记,不然函数不起作用),用作触底判断。

<template>
 <div class="wrap">
 <scroll :onBottom = "onBottom"></scroll>
 </div>
</template>
 
<script>
 import Scroll from '@/components/scroll'
 export default {
 name: 'roll',
 components:{
 Scroll,
 },
 methods:{
 onBottom(){
  console.log('bottom')
 }
 }
 }
</script>
<style type="text/css" lang="stylus" scoped>
 .wrap{
 height: 1000px;
 background: grey;
 width: 100%;
 }
</style>

父子传值也可以传递data里面的函数。这里我的回调函数里面进行的操作是到底部后console出bottom

效果:

可以看到触发频次比较高,其实子组件里面应该加一个函数节流函数,限制触发频率。

Vue组件实现触底判断

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS类库Bindows1.3中的内存释放方式分析
Mar 08 Javascript
用JavaScript将从数据库中读取出来的日期型格式化为想要的类型。
Aug 15 Javascript
菜鸟javascript基础资料整理2
Dec 06 Javascript
jQuery中hide()方法用法实例
Dec 24 Javascript
jQuery常用知识点总结以及平时封装常用函数
Feb 23 Javascript
基于jQuery的Web上传插件Uploadify使用示例
May 19 Javascript
谈谈JavaScript中的几种借用方法
Aug 09 Javascript
基于node.js依赖express解析post请求四种数据格式
Feb 13 Javascript
Javascript下拉刷新的简单实现
Feb 14 Javascript
详解利用jsx写vue组件的方法示例
Jul 17 Javascript
JavaScript判断浏览器版本的方法
Nov 03 Javascript
vue-week-picker实现支持按周切换的日历
Jun 26 #Javascript
CKeditor4 字体颜色功能配置方法教程
Jun 26 #Javascript
Vue编写可显示周和月模式的日历 Vue自定义日历内容的显示
Jun 26 #Javascript
ES6 Symbol数据类型的应用实例分析
Jun 26 #Javascript
亲自动手实现vue日历控件
Jun 26 #Javascript
js设置鼠标悬停改变背景色实现详解
Jun 26 #Javascript
ES6 Generator函数的应用实例分析
Jun 26 #Javascript
You might like
无线电广播的开始
2002/01/30 无线电
php表单文件iframe异步上传实例讲解
2017/07/26 PHP
Laravel框架学习笔记之批量更新数据功能
2019/05/30 PHP
Riot.js 快速的JavaScript单元测试框架
2009/11/09 Javascript
很棒的学习jQuery的12个网站推荐
2011/04/28 Javascript
学习JavaScript的最佳方法分享
2011/10/21 Javascript
文本框只能选择数据到文本框禁止手动输入
2013/11/22 Javascript
转换字符串为json对象的方法详解
2013/11/29 Javascript
JavaScript中使用数组方法汇总
2016/02/16 Javascript
Angular.js之作用域scope'@','=','&amp;'实例详解
2017/02/28 Javascript
详解webpack进阶之插件篇
2017/07/06 Javascript
javascript的this关键字详解
2019/05/20 Javascript
layui+jquery支持IE8的表格分页方法
2019/09/28 jQuery
通过js随机函数Math.random实现乱序
2020/05/19 Javascript
Vue通过Blob对象实现导出Excel功能示例代码
2020/07/31 Javascript
如何利用 JS 脚本实现网页全自动秒杀抢购功能
2020/10/12 Javascript
聊聊vue 中的v-on参数问题
2021/01/29 Vue.js
python实现应用程序在右键菜单中添加打开方式功能
2017/01/09 Python
Python实现 多进程导入CSV数据到 MySQL
2017/02/26 Python
详解python3中zipfile模块用法
2018/06/18 Python
python日志logging模块使用方法分析
2019/05/23 Python
pytorch 利用lstm做mnist手写数字识别分类的实例
2020/01/10 Python
Python定时器线程池原理详解
2020/02/26 Python
HTML5 客户端数据库简易使用:IndexedDB
2019/12/19 HTML / CSS
单身旅行者的单身假期:Just You
2018/04/08 全球购物
实习教师自我鉴定
2013/09/27 职场文书
旅游与酒店管理的自我评价分享
2013/11/03 职场文书
教育专业个人求职信
2013/12/02 职场文书
商场中秋节活动方案
2014/02/07 职场文书
竞选班长演讲稿400字
2014/08/22 职场文书
秦兵马俑导游词
2015/02/02 职场文书
党员干部公开承诺书范文
2015/04/27 职场文书
2015年小学体育工作总结
2015/05/22 职场文书
新闻报道稿范文
2015/07/23 职场文书
使用golang编写一个并发工作队列
2021/05/08 Golang
关于MySQL中explain工具的使用
2023/05/08 MySQL