微信小程序如何实现自定义导航栏、导航栏手机适配（获取导航栏、状态栏高度和胶囊位置）以及踩过的坑-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序如何实现自定义导航栏、导航栏手机适配（获取导航栏、状态栏高度和胶囊位置）以及踩过的坑。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

背景：不用官方默认的导航栏，想用自己自定义的

实现效果：微信小程序如何实现自定义导航栏、导航栏手机适配（获取导航栏、状态栏高度和胶囊位置）以及踩过的坑,微信小程序,notepad++,小程序,前端,javascript

关键词：顶部状态栏、顶部导航栏、顶部状态导航栏、胶囊

原理：微信小程序如何实现自定义导航栏、导航栏手机适配（获取导航栏、状态栏高度和胶囊位置）以及踩过的坑,微信小程序,notepad++,小程序,前端,javascript

自定义导航栏无非就是求得导航栏高度，并让内容容器垂直方向居中于导航栏高度

1.获取手机系统状态栏高度

2.获取胶囊位置（包括高度）

3.求得导航栏高度（导航栏高度实际上就是胶囊高度+高度差*2）

高度差 = 胶囊位置到屏幕顶部距离（menu.top,menu为胶囊位置对象）-状态栏高度（直接获取res.statusBarHeight）

（所有单位长度默认px）


     // 获取手机系统信息
     wx.getSystemInfo({
      success: res => {
     
        // 手机系统状态栏高度
        wx.setStorageSync('statusBarHeight', res.statusBarHeight)

        const platform = res.platform
        const menu =  wx.getMenuButtonBoundingClientRect()

        //menu为胶囊，判断是否能读到胶囊位置，读不到则用具体一般数值表示
        if (menu) {
          wx.setStorageSync('menu', menu)

          // 导航栏高度
          wx.setStorageSync('navBarHeight', menu.height+(menu.top-res.statusBarHeight) *2 )

          // 状态栏加导航栏

          wx.setStorageSync('navStatusBarHeight', res.statusBarHeight+ menu.height+(menu.top-res.statusBarHeight) *2 )


        }else{
          wx.setStorageSync('menu', null)

          // 导航栏高度
          wx.setStorageSync('navBarHeight', platform === 'android' ? 48 : 44)

           // 状态栏加导航栏

           wx.setStorageSync('navStatusBarHeight', res.statusBarHeight+ (platform === 'android' ? 48 : 44) )

        }

      }, fail(err) {
        console.log(err);
      }
    })

那么如何保持胶囊位置左边的搜索图标呢？

获取到胶囊到屏幕左侧的值，意思是menu.left，让容器等于这个menu.left值，然后让图标水平靠右即可

微信小程序如何实现自定义导航栏、导航栏手机适配（获取导航栏、状态栏高度和胶囊位置）以及踩过的坑,微信小程序,notepad++,小程序,前端,javascript

示例代码：

wxml

<view class="navigation-container" style="{{'height: ' + navStatusBarHeight +'px'}}">
  <!--空白来占位状态栏-->
  <view style="{{'height: ' + statusBarHeight +'px'}}"></view>
  <!--自定义导航栏-->
  <view class="navigation-bar" style="{{'height:' + navBarHeight +'px'}}">
    <view class="nav-title" style="height: 100%;">
      <view class="bg-logo">
        <text style="letter-spacing: 2rpx;font-weight: bold;font-size: 18px;">翡翠世界</text>
        <text style="font-size: 26rpx;letter-spacing: 2rpx;font-size: 10px;">交易走淘宝 | 48H鉴赏期</text>
      </view>
    </view>
    <view class="nav-search" style="height: 100%;width: {{menu.left ? menu.left : 281}}px;">
      <image  bindtap="search" src="../../images/icon/search.png" style="width:25px;height: 25px;padding-right: 10px;" />
    </view>
  </view>
</view>


  data: {

    // 状态栏高度
    statusBarHeight: wx.getStorageSync('statusBarHeight'),
    // 导航栏高度
    navBarHeight: wx.getStorageSync('navBarHeight'),

    // 导航栏和状态栏高度
    navStatusBarHeight: wx.getStorageSync('navStatusBarHeight'),

    // 胶囊
    menu:wx.getStorageSync('menu')

  },

wxss

/* 自定义导航栏 */

.navigation-container {
  position: fixed;
  width: 100%;
  z-index: 99;
  background-color: rgb(28, 190, 96);
}
.navigation-bar {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: row;
  color: #333333;
}


.nav-title {
  display: flex;
  
  margin-left: 20rpx;
  box-sizing: border-box;
}

.nav-search {
  position: absolute;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}





.bg-logo {
  width: 300rpx;
  display: flex;
  flex-direction: column;
  color: #f7f7f7;
  position: absolute;
  top: 0;
  left:20rpx;
}