标签分类
技术文章
当前位置:主页 > 计算机编程 > vue.js > vue 纯js监听滚动条到底部的实例讲解

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

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

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

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

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

更多相关的学习资源可以参阅 程序设计电子书Web前端视频、等栏目。

在网页中,我们会遇到很多在滚动条到底部的时候有数据正在加载的事件,那么怎样用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监听滚动条到底部的实例讲解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持码农之家。

以上就是本次给大家分享的全部知识点内容总结,大家还可以在下方相关文章里找到解决axios.interceptors.respon、 vue项目中使用md5加密以及、 spring+springmvc+mybatis整合注、 等vue.js文章进一步学习,感谢大家的阅读和支持。

上一篇:vue-cli项目中缩短首屏加载时间实例

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

展开 +

收起 -

学习笔记
网友NO.351367

Vue.js划分组件的方法

常见的一些页面,大家坐在一起敲代码就可以了,做完这个页面再做别的页面,但是作为一个功能复杂的系统,尤其是使用一些适合模块化开发的框架,这样会显得效率很低,那么我们就单纯的看在Vue里面如何划分组件的。 总结下来有两种可以划分,两种划分的方法一种是页面上的功能块,select,pagenation,和一些需要大量代码去实现的一些部分,我们可以把它提取出来放到一起或者分类。还有一种根据页面区域来划分,header,footer,sidebar,有了组件之后Vue的组件是怎么实现的? Vue的组件是怎么实现的?先来看一下在文件系统里面是什么样的 APP.vue是项目的一个入口,而我们分好的组件也是一个对象,在APP.vue里面,我们把各个组件用import 导入,header指的是右边的header.vue文件,这个写法是es6的一个写法,当然如果不用不用es6组件化,也得用其他的一些requires来写,进行一个打包处理,如果只是把这两个组件引入到app.vue 里面,在页面中还是现实 不了这两个组件的。 在Vue里面 必须通过components来注册这个组件,把引入进来的 放入,然后在模板层面上再来写header/header和footer/footer,在渲染之后,模板层面会变成header.vue和footer.vue里面的内容,有一点需要注意,Vue必须要去注册才可以使用 介绍一下Vue组件之间的通信,秉承了一个概念……

网友NO.970007

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

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

网友NO.597735

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

在开发过程中,为了效果好看,往往需要自己开发一个下拉列表,而不是使用 HTML 自身的 select 下拉列表。然而当编写自定义下拉列表的时候,就会碰到一个问题:如果用户在下拉列表的范围外进行鼠标点击的操作,如何关闭已经打开的下拉列表? 解决思路如下: 在 DOM 的根节点上添加一个 click 事件,同时下拉列表内阻止事件的默认行为和冒泡。当响应这个点击事件的时候,说明是在下拉列表范围外的点击(因为下拉列表内阻止了事件的冒泡),就可以关闭已经打开的下拉列表。 如果是纯 JS 代码,有人可能会使用 document.onclick 来添加根节点事件。不过,我现在使用 Vue.js,会选择使用 Vue.js 的方式处理这个问题。 Vue.js 使用组件化的方式组织代码,会有一个根组件,可以在这个根组件上加上 @click 事件,来响应区域外的点击事件。在一个完整的应用中,可能有多种场景需要这种区域外点击关闭的功能。除了最普通的表单里的下拉列表外,还可能是网站右上角的消息提示框,或者菜单。比较合适的做法是把点击事件的具体处理逻辑放到各个组件中去。 那么如何让各个子组件响应根组件上的点击事件呢?可以使用Vuex来做到这一点。在这里 Vuex 起到了组件之间互相传递信息的作用。 读者可以在这个网址下载我编写的 Demo 项目:……

网友NO.635665

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(事件名,数据); v-on: @ 1、子组件获取父组件data 方法一: !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 template id="aaa" h111111/h1 bbb :mmm="msg2" :my-msg="msg"/bbb /template script var vm=new Vue({ el:'#box', data:{ a:'aaa' }, components:{ 'aaa':{ data(){ return { msg:111, msg2:'我是父组件的数据' } }, template:'#aaa', components:{ 'bbb':{ pr……

<
1
>

Copyright 2018-2019 xz577.com 码农之家

版权责任说明