在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>
如果还有错误或问题请留言指正和交流