<template>
<view class="rong">
<view class="ye">
<scroll-view scroll-y="true" class="scroll-Y" show-scrollbar="none" @scroll="handleScroll">
<view class="header" :style="{paddingTop:paddingTop + 'px',height:height + 'px',backgroundColor:backgroundColor}">
<view>自定标题栏</view>
</view>
<view class="info">
<view style="width: 100%; height: 10rem; background-color: red;"></view>
<image style="width: 100%;height: 200%;"
src="https://skm-qny.diannaoweixiu.xyz/2023/11/01/adab65eb-185e-4a37-a29a-33f19af0a284_20231101090940A003.jpg"></image>
</view>
<view class="info">1</view>
<view class="info">1</view>
<view class="info">1</view>
<view class="info">1</view>
<view class="info">1</view>
</scroll-view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
paddingTop: 0,
height: 0,
isHeaderHidden: false,
backgroundColor:""
}
},
onLoad() {
//设置导航条高度
let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
this.paddingTop = menuButtonInfo.top
this.height = menuButtonInfo.height * 2
},
methods: {
handleScroll(e) {
// 获取滚动距离
const scrollTop = e.detail.scrollTop
console.log(scrollTop)
// 设置阈值，当滚动超过该阈值时隐藏标题栏
let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
const threshold = menuButtonInfo.height
if (scrollTop > threshold && !this.isHeaderHidden) {
this.height = menuButtonInfo.height
this.isHeaderHidden = true
this.backgroundColor = "#ffffff"
} else if (scrollTop <= threshold && this.isHeaderHidden) {
let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
this.height = menuButtonInfo.height * 2
this.isHeaderHidden = false
this.backgroundColor = "rgba(0, 0, 0, 0.0)"
}
}
}
}
</script>
<style lang="scss">
.scroll-Y {
height: 100%;
}
.header {
z-index: 999;
position: fixed;
width: 100%;
background-color: rgba(0, 0, 0, 0.0);
transition: height 0.3s ease;
}
.info {
height: 10rem;
width: 100%;
background-color: #ffffff;
}
</style>
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/188037.html
