当前页面结构(顶部导航栏容器组件+中间内容容器组件):
<view class="page">
<uni-head-navigation ref="headNavigator" >
</uni-head-navigation>
<uni-content-box @scroll="handleScroll">
</uni-content-box>
</view>
实现方式:
1、页面滚动组件(中间内容组件)使用 scroll-view 组件以用于绑定scroll事件并且使用 emit 添加事件绑定传输页面滚动值
2、顶部导航设置 ref 属性 用于接收滚动时产生的页面滚动值
3、当前页面作为中间过渡接收来自 中间内容组件传输的页面滚动值
详细代码:
uni-head-navigation:顶部涉及到class选择其中动态绑定样式,navStyle为动态改变的样式
<template>
<view :style="[navStyle]">
</view>
</template>
<script>
export default {
name: "uni-head-navigation",
data() {
return {
scrollTop: 0, // 监听主容器页面滚动
};
},
methods: {
// 上滑时,监听滚动值----用于做颜色渐变
onScroll(scrollTop) {
this.scrollTop = scrollTop;
// console.log("head组件触发滚动事件:",this.scrollTop)
},
}
}
</script>
中间内容组件:
<template>
<scroll-view scroll-y="true" @scroll="handleScroll">
</scroll-view>
</template>
<script>
export default {
name: "uni-content-box",
data() {
return {
};
},
methods:{
handleScroll(event) {
// console.log("content组件触发滚动事件:",event.target.scrollTop)
const scrollTop = event.target.scrollTop;
this.$emit('scroll', scrollTop);
},
}
}
</script>
当前页面:
<template>
<view class="page">
<uni-head-navigation ref="headNavigator" >
</uni-head-navigation>
<uni-content-box @scroll="handleScroll">
</uni-content-box>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
handleScroll(scrollTop) {
// console.log("父组件触发滚动事件:",scrollTop)
this.$refs.headNavigator.onScroll(scrollTop);
},
},
}
</script>
样式和中间具体内容代码不全,请自行补全