<template>
<view>
<view class="nav" :style="{ backgroundColor: navBackgroundColor }">
<!--导航栏+顶部-->
</view>
<view class="content" @scroll="onPageScroll">
<!-- 页面内容 -->
</view>
</view>
</template>
<script>
export default {
data() {
return {
navBackgroundColor: 'transparent' // 导航栏底色
};
},
methods: {
onPageScroll(event) {
// 获取距离
const scrollTop = event.detail.scrollTop;
//距离的判断条件
if (scrollTop > 100) {
this.navBackgroundColor = '#ffffff';
} else {
this.navBackgroundColor = 'transparent';
}
}
}
};
</script>
<style>
.nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 60px;
color: #333;
text-align: center;
line-height: 60px;
transition: background-color 0.3s;
}
.content {
margin-top: 60px;
height: 500px;
overflow-y: scroll;
}
</style>
滚动监听实现头部导航样式改变
最新推荐文章于 2024-10-02 05:39:15 发布