今天写小程序页面导航的样式，页面导航栏的样式需要根据页面滚动的距离做出变化。所以得知道当前页面滚动的距离，因此打算使用onPageScroll函数来获取页面滚动的距离。在页面写的时候，使用onPageScroll是能正常监听到滚动的距离的。所以我想封装成一个一个hooks，在别的页面也能够正常使用，但是封装到hooks里面的onPageScroll就失效了，回调函数根本就没执行。起初我以为是页面没渲染好就去监听的问题，后面尝试使用定时器,几秒以后再去监听onPageScroll也是不行的，想知道是为什么？

以下是封装hooks的代码

import { nextTick, ref } from 'vue';
import { onPageScroll, onReady } from '@dcloudio/uni-app';


export default function() {
  const scrollY = ref(0);
  const handleScroll = (options) => {
	console.log(options, '0000000')
    scrollY.value = options.scrollTop;
  };
  onPageScroll(handleScroll);
  return {
    scrollY,
  };
}

使用hooks的界面样式

<template>
	<view class="content">
		<!-- 头部导航栏 -->
		<!-- <NavBar 
			title="消息"
			titleColor="#fff"
			:auto-back="false"
			:opacity="opacity"
			:isShowBack="false"
			:placeholder="false"
		/> -->
		
		<!-- 头部开启订阅消息 -->
		<view class="header-info">
			<image src="/static/message/header.png" mode=""></image>
			<view class="wechat-subscribe">
				<view class="desc">
					<view class="notice-icon">
						<image src="/static/message/notice-icon.png"></image>
					</view>
					<view class="text">
						<view class="top">开启微信服务订阅</view>
						<view class="bottom">及时接收订单、活动等优惠消息</view>
					</view>
				</view>
				<view class="subscribe-btn">
					去开启
				</view>
			</view>
		</view>
		
		<!-- 订阅消息列表 -->
		<view class="notice-list">
			<view class="notice-list-item" v-for="(item, index) in 8" :key="index">
				<view class="time">1分钟前</view>
				<view class="notice-box">
					<view class="title">支付成功</view>
					<view class="desc">大屏灯光秀15s-30次播放 预约7月10号 18:45-19:44分支付成功！</view>
					<view class="view-detail">
						<view class="text">查看详情</view>
						<view class="icon">
							<image src="/static/global/left-arrow-icon.png"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>


<script setup>
	// 111
	import { ref, watch } from 'vue';
	import useScroll from '../../hooks/useScroll.js';
	const { scrollY } = useScroll();
	
</script>


<style>
	page {
		background: #F3F5F8;
	}
</style>
<style lang="scss" scoped>
	.header-info {
		position: relative;
		width: 100%;
		height: 258rpx;
		image {
			position: absolute;
			width: 100%;
			height: 100%;
		}
		.wechat-subscribe {
			position: absolute;
			display: flex;
			justify-content: space-between;
			align-items: center;
			bottom: -68rpx;
			left: 50%;
			width: 690rpx;
			height: 136rpx;
			background: #FFFFFF;
			border-radius: 8rpx;
			box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0,0,0,0.05);
			transform: translateX(-50%);
			.desc {
				display: flex;
				align-items: center;
				margin-left: 40rpx;
				.notice-icon {
					margin-right: 10rpx;
					width: 72rpx;
					height: 72rpx;
					image {
						width: 72rpx;
						height: 72rpx;
					}
				}
				.text {
					.top {
						font-size: 32rpx;
						font-weight: 600;
						color: #333333;
					}
					.bottom {
						font-size: 24rpx;
						font-weight: 400;
						color: #999999;
					}
				}
			}
			.subscribe-btn {
				margin-right: 32rpx;
				width: 160rpx;
				height: 60rpx;
				line-height: 60rpx;
				background: #FF2A2A;
				border-radius: 30rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #FFFFFF;
				text-align: center;
			}
		}
	}
	
	.notice-list {
		margin-top: 100rpx;
		padding: 0 30rpx;
		.notice-list-item {
			box-sizing: border-box;
			width: 690rpx;
			height: 320rpx;
			.time {
				margin: 20rpx 0;
				text-align: center;
				font-size: 24rpx;
				font-weight: 400;
				color: #999999;
			}
			.notice-box {
				box-sizing: border-box;
				width: 690rpx;
				height: 260rpx;
				padding: 0 40rpx;
				padding-top: 28rpx;
				padding-bottom: 22rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0,0,0,0.05);
				border-radius: 8rpx;
				.title {
					font-size: 30rpx;
					font-weight: 600;
					color: #333333;
				}
				.desc {
					margin-top: 8rpx;
					padding-bottom: 25rpx;
					line-height: 40rpx;
					font-size: 28rpx;
					color: #666666;
					border-bottom: 1rpx solid #979797;
				}
				.view-detail {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 10rpx;
					.text {
						font-size: 28rpx;
						color: #6A7A8D;
					}
					.icon {
						width: 56rpx;
						height: 56rpx;
						image {
							width: 100%;
							height: 100%;
						}
					}
				}
			}
			
		}
	}
</style>