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 相关文章推荐
Three.js源码阅读笔记(基础的核心Core对象)
Dec 27 Javascript
javascript中call apply 的应用场景
Apr 16 Javascript
基于jQuery和Bootstrap框架实现仿知乎前端动态列表效果
Nov 09 Javascript
微信公众平台开发教程(四) 实例入门:机器人回复(附源码)
Dec 02 Javascript
JS实现的简单轮播图运动效果示例
Dec 22 Javascript
js实现canvas保存图片为png格式并下载到本地的方法
Aug 31 Javascript
vue cli构建的项目中请求代理与项目打包问题
Feb 26 Javascript
jQuery实现数字自动增加或者减少的动画效果示例
Dec 11 jQuery
微信小程序实现搜索历史功能
Mar 26 Javascript
详解JS预解析原理
Jun 16 Javascript
swiper4实现移动端导航栏tab滑动切换
Oct 16 Javascript
微信小程序对图片进行canvas压缩的方法示例详解
Nov 12 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
PHP提取字符串中的图片地址[正则表达式]
2011/11/12 PHP
深入php define()函数以及defined()函数的用法详解
2013/06/05 PHP
php设计模式之委托模式
2016/02/13 PHP
PHP支付系统设计与典型案例分享
2016/08/02 PHP
javascript function、指针及内置对象
2009/02/19 Javascript
js 左右悬浮对联广告代码示例
2014/12/12 Javascript
JavaScript中日期的相关操作方法总结
2015/10/24 Javascript
js操作XML文件的实现方法兼容IE与FireFox
2016/06/25 Javascript
jQuery获取与设置iframe高度的方法
2016/08/01 Javascript
用js读写cookie的简单方法(推荐)
2016/08/08 Javascript
ES6通过babel转码使用webpack使用import关键字
2016/12/13 Javascript
jquery+css实现简单的图片轮播效果
2017/08/07 jQuery
vue使用监听实现全选反选功能
2018/07/06 Javascript
vue微信分享出来的链接点开是首页问题的解决方法
2018/11/28 Javascript
原生js实现抽奖小游戏
2019/06/27 Javascript
JS document form表单元素操作完整示例
2020/01/13 Javascript
原生js无缝轮播插件使用详解
2020/03/09 Javascript
[04:41]2014DOTA2国际邀请赛 Liquid顺利突围晋级正赛
2014/07/09 DOTA
详解Python中for循环的使用
2015/04/14 Python
Saltstack快速入门简单汇总
2016/03/01 Python
Python实现在某个数组中查找一个值的算法示例
2018/06/27 Python
python3实现指定目录下文件sha256及文件大小统计
2019/02/25 Python
将python依赖包打包成window下可执行文件bat方式
2019/12/26 Python
详解如何将 Canvas 绘制过程转为视频
2021/01/25 HTML / CSS
美国潜水装备、水肺潜水和浮潜设备商店:Leisure Pro
2018/08/08 全球购物
Feelunique澳大利亚:欧洲的化妆品零售电商
2019/12/18 全球购物
Nasty Gal英国:美国女性服饰销售网站
2021/03/02 全球购物
Vans(范斯)新西兰官方网站:美国原创极限运动品牌
2020/09/19 全球购物
UDP协议功能
2013/01/06 面试题
《争吵》教学反思
2014/02/15 职场文书
春风行动实施方案
2014/03/28 职场文书
委托书样本
2014/04/02 职场文书
团日活动总结书
2014/05/08 职场文书
向女朋友道歉的话
2015/01/20 职场文书
培训讲师开场白
2015/06/01 职场文书
浅谈JS和Nodejs中的事件驱动
2021/05/05 NodeJs