一、完整代碼：
<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>
二、效果預覽：
