vue3 element plus dialog 拉伸 vue 上拉加载

转载

bingfeng 2024-04-01 08:42:21

在移动端开发中经常会运用到上拉加载更多来实现分页的操作，不仅可以增加用户良好的体验，也可以让自己的项目看起来更加的丝滑~

那么具体要怎么做呢？

准备一个容器来设置滚动事件

如果要设置固定高度容器则设置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));
    },