uniapp自定义头部导航栏支持微信小程序appH5

uniapp自定义头部导航栏支持微信小程序appH5

使用uniapp Vue3版本 uview-plus框架

1. 创建组件 随便取个名字 top.vue

3. 使用uni.getSystemInfo（）获取设备信息取到设备窗口的宽高

				success: (res) => {
					if (res.model == 'iPhone') {
						this.statusBarHeight = 68

					} else {
						this.statusBarHeight = 76
					}

					uni.setStorage({
						key: 'statusBarHeight',
						data: this.statusBarHeight
					})

				}
			})

4. 根据需要设定一下需要的高度 安卓苹果不一样要注意 苹果68 安卓76 这只是大概

5. 在顶部写两个view 把68给它

		<view class="TitleBarStance" :style="{height:TitleBarHeight+ 'rpx',paddingTop: statusBarHeight+ 'rpx'}"></view>

6. 内容区域可以根据自己的需要来写了，

			:style="{top:statusBarHeight+ 'rpx'}">
		<view class="f" style="align-items: center;">
			<view class="" v-if="iconShow">
				<u-icon name="arrow-left" size="24" @click="back"></u-icon>
			</view>
			<view class=" ml10rpx" style="font-size: 40rpx;font-weight: 600;">
				{{title}}
			</view>
		</view>
			
			<view class=" " v-if="adds" >
				<u-button type="primary" size="small " @click="addShow" text="+新建"></u-button>
			</view>

		</view>

7. 右箭头 可以使用弹性布局 标题 或者添加按键啥的

		name: "top",
		props: ['title', 'iconShow', 'adds'],}

在别的页面使用的时候 先引入 import top from '../../components/top/top.vue'; components: { top }, title: '今日计划',

需要注意的是，在开发过程中还需要对各种不同机型、不同平台的兼容性进行测试，确保自定义头部导航栏能够正常显示并且样式符合要求。同时，在页面中需要谨慎处理滚动事件（如下拉刷新、滚动到顶部等）与自定义导航栏的交互，以避免出现显示上的问题。