技术文章
当前位置:首页 > vue.js技术文章 > vue 纯js监听滚动条到底部的实例讲解

vue纯js监听滚动条到底部的知识点实例

  • 发布时间:
  • 作者:码农之家原创
  • 点击:294

这篇文章主要知识点是关于vue、监听滚动条、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

Vue企业开发实战
  • 类型:Vue.js实战大小:109.6 MB格式:PDF出版:人民邮电出版社作者:肖睿
立即下载

更多Vue相关的学习资源可以参阅 Vue电子书程序设计电子书 等栏目。

vue 纯js监听滚动条到底部的实例讲解

在网页中,我们会遇到很多在滚动条到底部的时候有数据正在加载的事件,那么怎样用vue去实现这样的内容呢?本篇只给出一个雏形,结合vue的生命周期用纯javascript写的一个监听函数,后续操作数据库的部分暂且不议。

1、怎样用纯js判断滚动条是否到底部?

先了解几个关键词:

(1)滚动条到顶部的位置:scrollTop

(2)当前窗口内容可视区:windowHeight

(3)滚动条内容的总高度:scrollHeight

触发监听的函数是:

window.onscroll = function(){...}

判断到底部的等式: scrollTop+windowHeight=scrollHeight;

2、主要函数代码

 created(){
 window.onscroll = function(){
 //变量scrollTop是滚动条滚动时,距离顶部的距离
 var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
 //变量windowHeight是可视区的高度
 var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
 //变量scrollHeight是滚动条的总高度
 var scrollHeight = document.documentElement.scrollHeight||document.body.scrollHeight;
    //滚动条到底部的条件
    if(scrollTop+windowHeight==scrollHeight){
    //写后台加载数据的函数
   console.log("距顶部"+scrollTop+"可视区高度"+windowHeight+"滚动条总高度"+scrollHeight);
    } 
  }
 }

以上这篇vue 纯js监听滚动条到底部的实例讲解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持码农之家。

以上就是本次给大家分享的关于Vue的全部知识点内容总结,大家还可以在下方相关文章里找到vue-cli开发时ajax跨域的方法、 elementUI table表格动态合并、 Vue2.0利用 v-model 实现组件、 等vue.js文章进一步学习,感谢大家的阅读和支持。

上一篇:vue给input file绑定函数获取当前上传的方法

下一篇:axios用最优雅的方式写ajax请求实例方法

展开 +

收起 -

相关电子书
学习笔记
网友NO.141598

Vue.js划分组件的方法

常见的一些页面,大家坐在一起敲代码就可以了,做完这个页面再做别的页面,但是作为一个功能复杂的系统,尤其是使用一些适合模块化开发的框架,这样会显得效率很低,那么我们就单纯的看在Vue里面如何划分组件的。 总结下来有两种可以划分,两种划分的方法一种是页面上的功能块,select,pagenation,和一些需要大量代码去实现的一些部分,我们可以把它提取出来放到一起或者分类。还有一种根据页面区域来划分,header,footer,sidebar,有了组件之后Vue的组件是怎么实现的? Vue的组件是怎么实现的?先来看一下在文件系统里面是什么样的 APP.vue是项目的一个入口,而我们分好的组件也是一个对象,在APP.vue里面,我们把各个组件用import 导入,header指的是右边的header.vue文件,这个写法是es6的一个写法,当然如果不用不用es6组件化,也得用其他的一些req……

网友NO.395703

vue element动态渲染、移除表单并添加验证的实现

又接到新需求了吧~~ 背景 在一个大表单里,有可能会出现这种需求,用户可以自己操作动态添加、移除表单,更加个性化的效果。 常见于填写个人信息、附加内容的表单 例如: “工作经历”可以用户自己点击继续添加按钮,在原有的表单后面 append 多一个表单,不需要就点击右上方 X 按钮移除 问题 在实现之前,提出几个问题 vue 怎么动态渲染或移除表单上去 v-model 怎么绑定动态添加表单的 value 值 动态新增的表单如何验证 动态表单怎么填写对应的 prop ... 好吧,我当时也思考了一会,最后选择数组方式,动态渲染 代码实现讲解 利用数组,v-for 循环方式,可以完美实现动态渲染和移除,因为操作的只有对象数组而已 export default { name: 'vouchersDetail', data() { return { form: { regionName: '', regionCode: '', // 动态添加的对象数组 azList: [ { azName: '', logicCode: '', physicC……

网友NO.884206

Vue.js实现在下拉列表区域外点击即可关闭下拉列表的功能(自定义下拉列表)

在开发过程中,为了效果好看,往往需要自己开发一个下拉列表,而不是使用 HTML 自身的 select 下拉列表。然而当编写自定义下拉列表的时候,就会碰到一个问题:如果用户在下拉列表的范围外进行鼠标点击的操作,如何关闭已经打开的下拉列表? 解决思路如下: 在 DOM 的根节点上添加一个 click 事件,同时下拉列表内阻止事件的默认行为和冒泡。当响应这个点击事件的时候,说明是在下拉列表范围外的点击(因为下拉列表内阻止了事件的冒泡),就可以关闭已经打开的下拉列表。 如果是纯 JS 代码,有人可能会使用 document.onclick 来添加根节点事件。不过,我现在使用 Vue.js,会选择使用 Vue.js 的方式处理这个问题。 Vue.js 使用组件化的方式组织代码,会有一个根组件,可以在这个根组件上加上 @click 事件,来响应区域外的点击事件。在一个完整的应用中……

网友NO.638545

vue组件数据传递、父子组件数据获取,slot,router路由功能示例

本文实例讲述了vue组件数据传递、父子组件数据获取,slot,router路由功能。分享给大家供大家参考,具体如下: 一、vue默认情况下,子组件也没法访问父组件数据 !DOCTYPE htmlhtml lang="en"head meta charset="UTF-8" titleDocument/title script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"/script style /style/headbody div id="box" aaa /aaa /div script var vm=new Vue({ el:'#box', data:{ a:'aaa' }, components:{ 'aaa':{ data(){ return { msg:'我是父组件的数据' } }, template:'h2我是aaa组件/h2bbb/bbb', components:{ 'bbb':{ template:'h3我是bbb组件-{{msg}}/h3'//这里是子组件,是访问不到父组件的数据msg } } } } }); /script/body/html 二、数据传递 组件数据传递: √ 1. 子组件获取父组件data 在调用子组件: bbb :m="数据"/bbb 子组件之内: props:['m','myMsg']props:{ 'm':String, 'myMsg':Number} 2. 父级获取子级数据 *子组件把自己的数据,发送到父级 vm.$emit(事件名……

Copyright 2018-2020 xz577.com 码农之家

电子书资源由网友、会员提供上传,本站记录提供者的基本信息及资源来路

鸣谢: “ 码小辫 ” 公众号提供回调API服务、“ 脚本CDN ”提供网站加速(本站寻求更多赞助支持)

版权投诉 / 书籍推广 / 赞助:520161757@qq.com

上传资源(网友、会员均可提供)

查看最新会员资料及资源信息