前言🏄
在移动端开发中经常会运用到上拉加载更多来实现分页的操作，不仅可以增加用户良好的体验，也可以让自己的项目看起来更加的丝滑~
那么具体要怎么做呢？
准备一个容器来设置滚动事件🚩
如果要设置固定高度容器则设置
ref
<template> <div class="container" ref="scroll"> <!-- 滚动内容代码 --> </div> </template> 复制代码
写一个滚动事件方法🏇
onScroll(){ //可滚动容器的高度 let innerHeight = this.$el.clientHeight; //屏幕尺寸高度 let outerHeight = document.documentElement.clientHeight; //可滚动容器超出当前窗口显示范围的高度 let scrollTop = document.documentElement.scrollTop; //避免切换时读取到异常高度 if(scrollTop==0){ innerHeight=10000 } //scrollTop在页面为滚动时为0，开始滚动后，慢慢增加，滚动到页面底部时，出现innerHeight < (outerHeight + scrollTop)的情况，严格来讲，是接近底部。 console.log(innerHeight + " " + outerHeight + " " + scrollTop); if(this.isLoad){ console.log(1) if(innerHeight <= outerHeight + scrollTop){ //此处添加自定义操作 } } }, 复制代码
如果设置了
ref则将$el换成$refs.scroll即可
设置滚动事件开关
data () { return { isLoad:true, msg:"正在加载" }; }, 复制代码
在生命周期函数 添加滚动事件和移除滚动事件
mounted(){ //开启滚动事件 window.addEventListener("scroll", this.onScroll); }, destroyed(){ //关闭滚动事件 window.removeEventListener("scroll",( this.onScroll)); } 复制代码
值得一提的是如果该页面用了
keepalive则会没有destroyed生命周期则用新增的两个生命周期来添加和移除滚动事件
activated(){ //开启滚动事件 window.addEventListener("scroll", this.onScroll); }, deactivated(){ //关闭滚动事件 window.removeEventListener("scroll",( this.onScroll)); }, 复制代码
写在最后🚣
以上就是分享的vue上拉加载更多操作，其实现在有很多已经开发好的插件可以使用，原理都是差不多监听窗口的高度来进行操作，平时开发时多加运用就好啦~
参考
参考官网： keep-alive使用
