微信小程序滑动控制自定义标题显隐操作

需求：别人首页有的，我们也要！

初始化隐藏标题、下滑 100rpx 显示、上滑回顶部隐藏

1.设置不使用系统标题，json配置...
2.首页html配置

3.首页js配置

onPageScroll：是小程序框架【内置的滚动监听方法】，框架会自动监听页面滚动并触发该方法；

执行特点：滚动过程中高频触发，入参包含滚动距离 scrollTop；
4.wxml样式配置,见下面完整代码...

完整代码

HTML

bash 复制代码

<!-- 自定义【显隐】标题：白色背景占满整行 -->
<view class="custom-nav-bar" style="opacity: {{navOpacity}};">
  <view class="nav-title-wrap" style="top: {{menuCenterY}}rpx;">
    <text class="nav-title">首页</text>
  </view>
</view>

<!-- 主要内容 -->
<view class="page-content">
	<!-- 你原有的首页内容... -->

</view>

bash 复制代码

		// ========== 【新增属性】标题栏核心数据 ==========
		navOpacity: 0, // 导航栏透明度（控制显隐）
		scrollThreshold: 100, // 下滑100rpx触发显示
		menuCenterX: 0, // 胶囊中心X坐标（rpx）
		menuCenterY: 0, // 胶囊中心Y坐标（rpx）
		
    //=================【onload方法执行...】
		// 第一步：优先计算胶囊中心坐标
		this.calcMenuCenter();
		// 第二步：初始化标题隐藏
		this.setData({
			titleOpacity: 0,
			titleHeight: 0
		})
		//======================【核心2个方法】========
		
	// 核心：计算胶囊的水平+垂直中心坐标（rpx）
	calcMenuCenter() {
		// 1. 获取系统信息和胶囊原始坐标（px）
		const systemInfo = wx.getSystemInfoSync();
		const menu = wx.getMenuButtonBoundingClientRect();
		const px2rpx = 750 / systemInfo.screenWidth; // px转rpx比例

		// 2. 计算胶囊中心坐标（px → rpx）
		// 水平中心：胶囊左坐标 + 胶囊宽度/2
		const menuCenterX_px = menu.left + menu.width / 2;
		// 垂直中心：胶囊上坐标 + 胶囊高度/2
		const menuCenterY_px = menu.top + menu.height / 2;

		// 3. 转换为rpx并赋值（标题将基于此坐标居中）
		this.setData({
			menuCenterX: menuCenterX_px * px2rpx,
			menuCenterY: menuCenterY_px * px2rpx
		});

		// 调试日志（可删除，用于验证坐标）
		console.log('胶囊中心坐标（rpx）：', {
			x: this.data.menuCenterX,
			y: this.data.menuCenterY
		});
	},

	// 滚动监听：仅控制导航栏透明度（高度固定，不影响对齐）
	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
		});
	},

WXML

bash 复制代码

/* ========== 【新增】标题栏核心样式 ========== */
page {
  margin: 0;
  padding: 0;
  background-color: #f5f5f5;
  padding-top: 88rpx; /* 预留导航栏高度 */
}

/* 导航栏容器：固定顶部，高度覆盖胶囊区域 */
.custom-nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 88rpx; /* 微信默认导航栏高度 */
  background-color: #fff; /* 导航栏背景占满整行（关键） */
  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;
}

/* 可选：测试内容样式 */
.page-content {
  /* padding: 0 30rpx; */
}
.item {
  height: 100rpx;
  line-height: 100rpx;
  border-bottom: 1rpx solid #eee;
  margin-bottom: 10rpx;
  font-size: 28rpx;
}