使用uniapp开发设置app的沉浸式状态栏，并滑动时上方状态栏变化

实现效果：

图1 沉浸式状态栏 

图二 页面滑动时状态栏变化（由图1变为图2） 

一、沉浸式状态栏实现 

在pages.json文件中配置需要实现沉浸式状态栏的页面路由中，设置titleNView属性为false，navigationStyle属性为custom，隐藏默认的导航栏，依靠页面元素实现沉浸式状态栏。

{
			"path": "pages/home/index",
			"style": {
				"navigationStyle": "custom",
				"backgroundColor": "#eef1f5",
				"enablePullDownRefresh": true,
				"navigationBarTextStyle":"white",
				"titleNView": false, // 设置默认导航栏隐藏
				"app-plus": {
					"titleNView": false, // 设置默认导航栏隐藏
				}
			}
		},

二、页面滑动后状态栏的改变 

 大体思路：在页面中写两种样式：分别为未滑动时的上方状态栏样式及滑动后要实现的状态栏样式，依据onPageScroll获取对应的状态栏改变时机，通过变量showTopSticky进行两种状态栏样式的显隐控制。

<template>
<view class="color-block">
// 未滑动时的状态栏样式
			<view class="input-box">
				<view class="text-box">
					<text class="input-text">请输入关键词</text>
				</view>
				<view class="icon-box">
					<text class="line">|</text>
					<up-icon name="search" size="24" color="#A6B2C9"></up-icon>
				</view>
			</view>
		</view>
// 滑动后的状态栏样式
		<view class="search-input-box" v-if="showTopSticky">
			<view class="search-input">
				<view class="text-box">
					<text class="input-text">请输入关键词</text>
				</view>
				<view class="icon-box">
					<text class="line">|</text>
					<up-icon name="search" size="24" color="#000"></up-icon>
				</view>
			</view>
		</view>
</template>

<script setup>
import {
		onPageScroll
	} from '@dcloudio/uni-app'

const showTopSticky = ref(false); // 是否显示顶部吸顶

// 页面滚动
	onPageScroll((e) => {
		// console.log('eeeeeeeeeeeeeee', e.scrollTop)
		showTopSticky.value = e.scrollTop > 80 // 换顶部吸顶
		showTopSticky.value ? plus.navigator.setStatusBarStyle("dark") : plus.navigator.setStatusBarStyle("white") // 状态栏字体颜色修改
	});
</script>
<style lang="scss" scoped>
// 两种状态栏的样式
</style>

三、注意事项

1.实现状态栏滑动时的改变支持vue文件，nvue文件不支持。

2.适用于app的开发，onPageScroll不要忘记引入。