<!-- 自定義【顯隱】標題：白色背景占滿整行 -->
<view class="custom-nav-bar" style="opacity: {{navOpacity}};">
  <view class="nav-title-wrap" style="top: {{menuCenterY}}rpx;">
    <text class="nav-title">首頁</text>
  </view>
</view>
<!-- 主要內(nèi)容 -->
<view class="page-content">
	<!-- 你原有的首頁內(nèi)容... -->
</view>

// ========== 【新增屬性】標題欄核心數(shù)據(jù) ==========
		navOpacity: 0, // 導航欄透明度（控制顯隱）
		scrollThreshold: 100, // 下滑100rpx觸發(fā)顯示
		menuCenterX: 0, // 膠囊中心X坐標（rpx）
		menuCenterY: 0, // 膠囊中心Y坐標（rpx）
    //=================【onload方法執(zhí)行...】
		// 第一步：優(yōu)先計算膠囊中心坐標
		this.calcMenuCenter();
		// 第二步：初始化標題隱藏
		this.setData({
			titleOpacity: 0,
			titleHeight: 0
		})
		//======================【核心2個方法】========
	// 核心：計算膠囊的水平+垂直中心坐標（rpx）
	calcMenuCenter() {
		// 1. 獲取系統(tǒng)信息和膠囊原始坐標（px）
		const systemInfo = wx.getSystemInfoSync();
		const menu = wx.getMenuButtonBoundingClientRect();
		const px2rpx = 750 / systemInfo.screenWidth; // px轉(zhuǎn)rpx比例
		// 2. 計算膠囊中心坐標（px → rpx）
		// 水平中心：膠囊左坐標 + 膠囊寬度/2
		const menuCenterX_px = menu.left + menu.width / 2;
		// 垂直中心：膠囊上坐標 + 膠囊高度/2
		const menuCenterY_px = menu.top + menu.height / 2;
		// 3. 轉(zhuǎn)換為rpx并賦值（標題將基于此坐標居中）
		this.setData({
			menuCenterX: menuCenterX_px * px2rpx,
			menuCenterY: menuCenterY_px * px2rpx
		});
		// 調(diào)試日志（可刪除，用于驗證坐標）
		console.log('膠囊中心坐標（rpx）：', {
			x: this.data.menuCenterX,
			y: this.data.menuCenterY
		});
	},
	// 滾動監(jiān)聽：僅控制導航欄透明度（高度固定，不影響對齊）
	onPageScroll(e) {
		const systemInfo = wx.getSystemInfoSync();
		const px2rpx = 750 / systemInfo.screenWidth;
		// 滾動距離（rpx），容錯：最小為0
		const scrollTopRpx = Math.max(e.scrollTop * px2rpx, 0);
		// 計算透明度：0→1（下滑≥100rpx則完全顯示）
		let navOpacity = 0;
		if (scrollTopRpx >= this.data.scrollThreshold) {
			navOpacity = 1;
		} else if (scrollTopRpx > 0) {
			navOpacity = scrollTopRpx / this.data.scrollThreshold;
		}
		// 僅更新透明度，對齊坐標不變
		this.setData({
			navOpacity
		});
	},

/* ========== 【新增】標題欄核心樣式 ========== */
page {
  margin: 0;
  padding: 0;
  background-color: #f5f5f5;
  padding-top: 88rpx; /* 預留導航欄高度 */
}
/* 導航欄容器：固定頂部，高度覆蓋膠囊區(qū)域 */
.custom-nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 88rpx; /* 微信默認導航欄高度 */
  background-color: #fff; /* 導航欄背景占滿整行（關(guān)鍵） */
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
  z-index: 999;
  transition: opacity 0.3s ease;
}
/* 標題容器：占滿導航欄寬度，垂直對齊膠囊 */
.nav-title-wrap {
  position: absolute;
  left: 0;
  width: 100%; /* 占滿整行寬度 */
  height: 100%; /* 占滿導航欄高度 */
  transform: translateY(-50%); /* 垂直對齊膠囊 */
  background-color: #fff; /* 白色背景占滿整行 */
}
/* 標題文字：水平居中 + 垂直居中 */
.nav-title {
  display: block;
  text-align: center; /* 水平居中 */
  line-height: 88rpx; /* 垂直居中（和導航欄高度一致） */
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
}
/* 可選：測試內(nèi)容樣式 */
.page-content {
  /* padding: 0 30rpx; */
}
.item {
  height: 100rpx;
  line-height: 100rpx;
  border-bottom: 1rpx solid #eee;
  margin-bottom: 10rpx;
  font-size: 28rpx;
}