小程序自定义导航栏

小程序自定义导航栏🐤🐤

js

js 复制代码
  data: {
    statusBarHeight: wx.getSystemInfoSync().statusBarHeight, // 状态栏高度
    navBarHeight: 44, // 导航栏高度
  },
  getSystemInfo() {
    //获取当前设备信息
    wx.getSystemInfo({
      success: res => {
        // 获取胶囊按钮信息
        let menuInfo = wx.getMenuButtonBoundingClientRect();
        // 计算导航栏高度
        let navBarHeight = menuInfo.height + (menuInfo.top - res.statusBarHeight) * 2;
        this.setData({
          statusBarHeight,
          navBarHeight
        })
      }
    })
  },
    onLoad(options) {
    this.getSystemInfo()
  },

wxml

html 复制代码
<view class="page-lucky" style="padding-top: {{statusBarHeight}}px;">
  <view class="nav-title" style=" height: {{navBarHeight}}px; line-height: {{navBarHeight}}px;">
    <image src="/static/detail/arrow-left.png" class="arrow-left" bindtap="back" mode="" />
    <text>首页</text>
  </view>
</view>

scss

css 复制代码
.page-lucky {
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;

  .arrow-left {
    position: absolute;
    top: 50%;
    left: 32rpx;
    transform: translateY(-50%);
    text-align: left;
    width: 40rpx;
    height: 40rpx;
  }

  .nav-title {
    position: relative;
    text-align: center;
    width: 100vw;
  }
}

json

json 复制代码
  "navigationStyle": "custom"

iOS 端(补充)

  • 状态栏高度使用wx.getSystemInfo中的statusBarHeight单位为px;
  • 导航栏高度固定位44px;
  • 注意:iOS端导航栏高度44与小程序默认导航栏("navgationStyle": "default")保持一致,iOS端标题与胶囊按钮并不是垂直居中的,是偏靠下一点的,而Android端是垂直居中对齐的,如果iOS也想要上下居中的效果可以采用Android端的方案;

Android 端(补充)

  • 状态栏高度使用wx.getSystemInfo中的statusBarHeight单位为px;
  • 根据胶囊的位置与高度计算出导航栏的高度,与Android端默认导航栏("navigationStyle": "default")保持一致,并且Android端标题与胶囊是垂直居中对齐的

参考链接 | 图片及文字

相关推荐
2501_9159184114 小时前
HTTPS 端口号详解 443 端口作用、iOS 抓包方法、常见 HTTPS 抓包工具与网络调试实践
android·网络·ios·小程序·https·uni-app·iphone
cookqq16 小时前
Cursor和Hbuilder用5分钟开发微信小程序
微信小程序·小程序·curosor
老华带你飞18 小时前
考研论坛平台|考研论坛小程序系统|基于java和微信小程序的考研论坛平台小程序设计与实现(源码+数据库+文档)
java·vue.js·spring boot·考研·小程序·毕设·考研论坛平台小程序
毕设源码-钟学长19 小时前
【开题答辩全过程】以 基于微信小程序的美发服务系统的设计与实现为例,包含答辩的问题和答案
微信小程序·小程序
canglingyue20 小时前
微信小程序罗盘功能开发指南
微信小程序·小程序
2501_915106321 天前
App Store 软件上架全流程详解,iOS 应用发布步骤、uni-app 打包上传与审核要点完整指南
android·ios·小程序·https·uni-app·iphone·webview
开发加微信:hedian1161 天前
微信推客小程序系统开发技术实践
微信·小程序
说私域1 天前
开源AI智能名片链动2+1模式S2B2C商城小程序在淘宝公域流量运营中的应用研究
人工智能·小程序·开源
2501_916013741 天前
App 上架全流程指南,iOS App 上架步骤、App Store 应用发布流程、uni-app 打包上传与审核要点详解
android·ios·小程序·https·uni-app·iphone·webview
canglingyue1 天前
微信小程序加速计开发指南
微信小程序·小程序