app中，实现下滑页面到一定高度，显示自定义导航栏

在uniapp官方文档的框架中有关于页面的生命周期 找到onPageScroll 生命周期，他的一个参数是scrollTop，即页面垂直方向已滚动的距离(单位px)
逻辑处理过程是：
先定义一个布尔类型的变量，来控制自定义导航栏的显示与隐藏，当垂直方向页面滚动到一定高度（这里设滚动到100px时）后，即大于100px，则显示自定义导航栏，否则，隐藏导航栏。

//在data中定义布尔类型变量
data() {
	return {
		isShowNav: false,
	}
}，
//页面的生命周期
onPageScroll(e) {
	if(e.scrollTop >= 100 ){
		console.log('显示导航栏');
		this.isShowNav = true
	}else {
		this.isShowNav = false
	}
},

将写好的自定义导航栏样式布局中添加v-if条件句，当isShowNav 的值为true时，才显示自定义导航栏。

<view v-if="isShowNav" class="position-fixed top-0 bg-white py-2" style="width: 100%; z-index: 1000;">
	<view :style="'height:'+statusBarHeight+'px;'"></view>
	<u-row class="w-90">
		<u-col span="3">
			<view class="pl-2 d-flex a-center">
				<view class="pr-1">山东</view>
				<u-icon name="arrow-down" size="30"></u-icon>
			</view>
		</u-col>
		<u-col span="6">
			<view class="text-muted" @click="goSearch">输入车辆名称</view>
		</u-col>
		<u-col span="3">
			<view class="d-flex j-end a-center pr-2">
				<u-icon name="search" size="30" @click="goSearch"></u-icon>
			</view>
		</u-col>
	</u-row>
</view>

如果还有错误或问题请留言指正和交流