微信小程序自定义navigationBar与胶囊对齐，解决方案_微信小程序 navigationbar 左对齐-CSDN博客

本文链接：https://blog.csdn.net/djc_18706636375/article/details/125174797

这篇博客详细介绍了如何在微信小程序中通过获取系统状态栏高度和胶囊信息，动态设置自定义导航栏的高度和位置，从而实现页面顶部的布局优化。内容包括在`index.js`中获取和存储状态栏高度，以及在`index.wxml`和`index.wxss`中应用这些值来创建一个包含搜索框和导航栏的固定顶栏布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

index.js

Page({
    data: { 
    	// 状态栏上方空白
        navigationBarTop: wx.getStorageSync('navigationBarTop'),
        // 导航栏高度
        navigationBarHeight: wx.getStorageSync('navigationBarHeight') ,
    onLoad() {
        // 获取状态栏高度
        const {
            statusBarHeight,
        } = wx.getSystemInfoSync()
        //获取胶囊信息
        const {
            top,
            height
        } = wx.getMenuButtonBoundingClientRect()
        // 自定义导航栏的到顶部距离 = 状态栏高度
        wx.setStorageSync('navigationBarTop', statusBarHeight)
        // 自定义导航栏高度 = 胶囊高度 + 胶囊的padding*2。如果获取不到设置为38
        wx.setStorageSync('navigationBarHeight', height ? height+(top - statusBarHeight) * 2 : 38)
    }
 })

index.wxml

<view class="search" style="height: {{navigationBarHeight}}px;padding-top: {{navigationBarTop}}px;">
  <view class="city">北京市<image class="icon" src="/static/icons/下箭头.png"></image></view>
  <view class="input">
  <image class="icon" src="/static/icons/搜索.png"></image>
  <input type="text" placeholder="请输入电影"/>
  </view>
</view>
<!-- 占位 -->
<view style="height: {{navigationBarHeight+navigationBarTop}}px;"></view> 
<view class="navbar">
  <text class="item {{currentTab==index?'active':''}}" wx:for="{{navbar}}" data-tab_index="{{index}}" wx:key="unique" bindtap="changeNavBar">{{item}}</text>
</view>

index.wxss

.search {
  z-index: 10;
  width: 100%;
  display: flex;
  align-items: center;
  padding: 0rpx 20rpx;
  font-size: 26rpx;
  position: fixed;
  background-color: #fff;
}