移动端vue下拉分页效果

时间:2021-6-9 作者:qvyue

背景:在项目开发过程中,使用CDN的方式来运用Vue,列表页面需要下拉分页
思路:向 Window 对象添加事件

window.addEventListener("scroll", this.scrollBottom, true);

第一个参数是时间的类型(如:‘click’,‘mousedown’)
第二个参数是时间触发后需要调用的函数
第三个参数是布尔值,用于描述事件是冒泡还是捕获,该参数是可选的。

new Vue({
  el: '#app',
  mounted: function () {
    window.addEventListener("scroll", this.scrollBottom, true);
  },
  methods: {
    scrollBottom: function(e) {
                // 滚动到页面底部时
                const el = document.getElementById("app");
                const windowHeight = window.screen.height;
                const scrollTop =
                        document.documentElement.scrollTop || document.body.scrollTop;
                const contentHeight = el.clientHeight;
                const toBottom = contentHeight - windowHeight - scrollTop;
                if (toBottom 

事件传递有两种方式:冒泡与捕获。

事件传递定义了元素事件触发的顺序。 如果你将

元素插入到

元素中,用户点击

元素, 哪个元素的 “click” 事件先被触发呢?
在 冒泡 中,内部元素的事件会先被触发,然后再触发外部元素,即:

元素的点击事件先触发,然后会触发

元素的点击事件。
在 捕获 中,外部元素的事件会先被触发,然后才会触发内部元素的事件,即:

元素的点击事件先触发 ,然后再触发

元素的点击事件。
addEventListener() 方法可以指定 “useCapture” 参数来设置传递类型:
默认值为 false, 即冒泡传递,当值为 true 时, 事件使用捕获传递。

document.getElementById("myDiv").addEventListener("click", myFunction, true);

推荐阅读更多精彩内容

  • 【转载】【移动端兼容问题研究】javascript事件机制详解(涉及移动兼容)
    javascript事件基础 我们的网页之所以丰富多彩并具有交互功能,是因为我们的javascript脚本语言,而…
    keyworldtony阅读 340评论 0赞 2
  • 移动端事件
    1.网络状态改变事件 H5新增了两个监听网络状态改变的事件 online 网络以连接 offline 网络已断开 …
    送你回城决阅读 44评论 0赞 1
  • H5移动端事件与设备宽度
    移动端获取设备宽度 基本上所有的移动端获取宽度,都是从getBoundingClientRect()对象上获取, …
    IT小池阅读 738评论 0赞 0
  • 给大家分享一个vue的移动端的事件项目
    给大家分享一个基于vue的移动端点击和长按事件库,项目于上周正式开源,今天来给大家分享一下 NPM github …
    劫匪强阅读 655评论 0赞 0
  • 阻止移动端浏览器下拉橡皮筋效果(下拉滚动露底)
    前言 最近项目有个需求:需要移动端浏览器下的橡皮筋效果,但是页面内部的存在div框需要存在滚动。由此,遇到的问题与…
    Chris_dc阅读 6,103评论 1赞 4
评论0
赞6
抽奖

reward

6赞7赞
赞赏
更多好文
声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:qvyue@qq.com 进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。