当前位置：首页 > ops >正文

Uniapp中自定义导航栏

ops 2025/8/29 9:14:04

一、代码：

<template><view class="page" :style="{ paddingTop: navbarHeight + 'px' }"><view class="navbar" :style="{ paddingTop: statusBarHeight + 'px' }"><view class="navbar-left" @click="goBack"><view class="navbar-left__arrow"></view></view><view class="navbar-title">{{title}}</view></view><view class="content">这里是内容区域 -- 渐变的内容</view><!-- <view class="content2">这里是内容区域 -- 普通的内容</view> --></view>
</template><script>export default {data() {return {title: '这是自定义标题',navbarHeight: 0, // 导航栏高度statusBarHeight: 0, // 状态栏的高度}},onLoad() {const systemInfo = uni.getSystemInfoSync();this.statusBarHeight = systemInfo.statusBarHeight;this.navbarHeight = this.statusBarHeight + 44; // 44是导航栏标准高度},onShow() {this.init()},methods: {init() {// 初始化页面},goBack() {// 获取当前页面栈const pages = getCurrentPages();if (pages.length > 1) {uni.navigateBack(); // 关闭当前页面，返回上一个页面} else {uni.redirectTo({  // 关闭当前页面，跳转到别的页面url: '/pages/index/index'});}},}}
</script><style scoped>.page {width: 100vw;height: 100vh;background-color: #F9F9FB;}.page .navbar {position: fixed;top: 0;left: 0;right: 0;z-index: 999;display: flex;align-items: center;}.page .navbar-title {flex: 1;height: 88rpx;line-height: 88rpx;text-align: center;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-weight: 600;font-size: 32rpx;color: #000000;}.page .content {position: absolute;top: 0;left: 0;width: 100vw;height: 420rpx; /*渐变的高度*/ background: linear-gradient(180deg, #C6EBFD 0%, #F9F9FB 100%);padding-top: calc(var(--status-bar-height) + 88rpx);}.page .content2 {padding: 32rpx 30rpx;background: pink;}
</style>