onUnload页面卸载和onPageScroll监听页面滚动

onUnload页面卸载

页面卸载是跳转到其他页面的时把跳转之前的页面清除,如图

	onUnload(()=>{
		console.log("页面卸载")
	})

我们在script里面写一个这样的方法,你正常的页面跳转是不会触发这个方法

这样一进去也不会触发

跳转之后也不会触发,当你在navigator里面加了一个open-type的时候,里面的属性选择reLaunch才可以触发这个onUnload页面卸载

<view>
		<navigator open-type="reLaunch" url="/pages/demo4/demo4">跳转到demo4</navigator>
	</view>

如图

有什么不一样吗,页面的回去箭头没了,也就是把之前的页面给卸载,所以叫页面卸载

onPageScroll

onPageScroll是监听页面滚动,很多地方都有用到这个函数,比如淘宝网,在首页往下滑的时候到一定程度就会出现一个回到顶部的按钮,点击之后就可以直接回到顶部使用onPageScroll就可以实现,先来看看它的返回值是什么吧

先写一个onPageScroll方法

onPageScroll((e)=>{
		console.log(e.scrollTop);
	})

在定义一个足够下滑的v-for

<view v-for="item in 50">
		{{item}}
	</view>

去浏览器看看返回的是什么

它所返回的就是它当前所在位置,我们可以在这下面定义一个回到顶部的文字

<view class="fixed" v-if="fixed">
		↑
	</view>
样式
.fixed{
	width: 30px;
	height: 30px;
	background-color: red;
	position: fixed;
	right: 30px;
	bottom: 30px;
}

然后在onPageScroll里面进行判断

	onPageScroll((e)=>{
		console.log(e.scrollTop);
		if(e.scrollTop>200){
			fixed.value=true;
		}
		if(e.scrollTop<200){
			fixed.value=false;
		}
	})

当前所在位置大于200就显示,小于就隐藏,还可以这样判断如下

onPageScroll((e)=>{
		console.log(e.scrollTop);
		fixed.value=e.scrollTop>200;
	})

和上面if判断是一样的效果