uniapp实现滑动指定位置显示顶部导航，通过监听页面滚动位置，进行判断是否展示，是的话就增加class名称on
1、在顶部导航加入配置： :scroll-top="scrollTop" 和 scroll="onPageScroll"
<template> <!--index.wxml--> <view class="container" :scroll-top="scrollTop" scroll="onPageScroll"> <view :class="!showNavbar ? 'home_head' : 'home_head on'"> <view class="home_head_search"> <image src="../../static/home_head_search.png"></image> <view class="">想搜点什么呢</view> </view> </view> </view> </template>
2、逻辑方法：在data里面新增变量showNavbar:false，并新增onPageScroll方法，监听页面滚动，判断滚动位置
<script>
export default {
data() {
return {
showNavbar: false,
}
},
onPageScroll: function (e) {
// console.log( e.scrollTop)
let showNavbar = e.scrollTop > 100; // 滚动超过100px显示导航栏
this.showNavbar = showNavbar
this.scrollTop = e.scrollTop
},
}
</script>
关于简忆
简忆诞生的故事
粤ICP备16092285号
文章评论（0）