uni-app 顶部导航栏颜色渐变

多余的咸鱼

于 2024-07-30 18:35:40 发布

阅读量362

点赞数 11

文章标签： uni-app 前端开发语言 vue.js es6 前端框架

本文链接：https://blog.csdn.net/m0_62778558/article/details/140803325

版权

当前页面结构（顶部导航栏容器组件+中间内容容器组件）：

<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>

样式和中间具体内容代码不全，请自行补全