导航栏的渐隐渐显（小程序）

滚到一定高度显示导航栏

onPageScroll在父组件中才会生效 子组件不生效

父组件

<template>
	<view>
		<view class="scroll-flex" v-show="!showsc" :style="{ opacity: stylecity }">
			<Nav></Nav>
		</view>
		<Banner></Banner>
	</view>
</template>

<script>
import Nav from ./components/nav.vue;
import Banner from ./components/banner.vue;
export default {
	components: {
		Nav,
		Banner,
	},
	data() {
		return {
			showsc: true,
			stylecity:0,
		};
	},
	methods: {
		handScroll(top) {
			if (top > 90) {
				// console.log(距离顶部90px)
				let opacity = top / 170;
				opacity = opacity > 1 ? 1 : opacity;
				// console.log(opacity)
				this.stylecity = opacity;
				this.showsc = false;
			} else {
				this.showsc = true;
			}
		}
	},
	//监听页面滚动
	onPageScroll(e) {
		console.log(e);
		let top = e.scrollTop;
		this.handScroll(top);
	}
};
</script>

<style>
page {
	background: #f8f8f8;
}
.scroll-flex {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	background: #ffd00c;
	z-index: 2;
}
</style>

子组件

<template>
	<view style="height: 2000px;">banner</view>
</template>

<script>
</script>

<style>
</style>

子组件（导航栏）

<template>
	<view>
		<view class="navs">
			<block v-for="(item, index) in navList" :key="index">
				<text :class="{ activetext: index == num }" @click="navbtn(index)">{
         
  { item.name }}</text>
			</block>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			num:0,
			navList: [
				{
					name: 宝贝
				},
				{
					name: 详情
				},
				{
					name: 评价
				}
			]
		};
	},
	methods:{
		navbtn(index){
			this.num = index
		}
	}
};
</script>

<style scoped>
.navs text {
	display: block;
	font-size: 30upx;
	width: 100upx;
	text-align: center;
	color: #464230;
}
.navs {
	display: flex;
	justify-content: center;
	height: 35px;
	line-height: 35px;
	padding: 5upx 0;
}
.activetext {
	border-bottom: 6upx solid #3d3b32;
}
</style>