onPageScroll监听页面滚动

onPageScroll里不要写交互复杂的js，比如频繁修改页面。因为这个生命周期是在渲染层触发的，在非h5端，js是在逻辑层执行的，两层之间通信是有损耗的。如果在滚动过程中，频发触发两层之间的数据交换，可能会造成卡顿。

1.如何使用

使用之前需要先用入onPageScroll，完了之后先写一个循环让它多输出一些东西方便我们滚动查看数据，然后写一个回调函数接受值输出到控制台查看。

<template>
	<view>
		<view v-for="(item,index) in 200">{{item}}</view>
	</view>
</template>

<script setup>
	import { ref } from "vue"
	
	import {onPageScroll} from "@dcloudio/uni-app"

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

<style lang="scss">
	.fixed{
		width: 40px;
		height: 40px;
		background: orange;
		position: fixed;
		right: 30px;
		bottom: 100px;
		.next{
			margin: auto;
		}
	}
</style>

可以看到我们滚动页面时随着我们滚动的距离增加，输出的值也越大

2.当我们想做到右侧有个小图标当我们滑动到一定位置就出现到顶部又消失的操作也很简单，只需要定义一个变量将默认值定为false，然后在标签上用v-if判断一下等于true就显示false就不显示，这里我们在onPageScroll中用到了一个方法scrollTop就是距离顶部位置是多少，判断一下传给fixed就能实现了。

当我们的值到达200时是不是就显示了，小于200就是false不显示了，如果说你想150显示也可以调整一下判断时的值就好了。