vue實現上拉加載

在移動端開發中經常會運用到上拉加載更多來實現分頁的操作，不僅可以增加用戶良好的體驗，也可以讓自己的項目看起來更加的絲滑~

那么具體要怎么做呢？

准備一個容器來設置滾動事件

如果要設置固定高度容器則設置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上拉加載更多操作，其實現在有很多已經開發好的插件可以使用，原理都是差不多監聽窗口的高度來進行操作，平時開發時多加運用就好啦~

參考官網：https://blog.csdn.net/xiasohuai/article/details/82224052 keep-alive使用