小程序自定义导航栏

小程序自定义导航栏🐤🐤

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端标题与胶囊是垂直居中对齐的

参考链接 | 图片及文字

相关推荐
00后程序员张3 小时前
Fiddler抓包工具使用教程,代理设置与调试方法实战解析(含配置技巧)
前端·测试工具·ios·小程序·fiddler·uni-app·webview
Goona_12 小时前
PyQt批量年龄计算工具:从身份证到指定日期的周岁处理
python·小程序·交互·pyqt
知识分享小能手14 小时前
微信小程序入门学习教程,从入门到精通,自定义组件与第三方 UI 组件库(以 Vant Weapp 为例) (16)
前端·学习·ui·微信小程序·小程序·vue·编程
全栈小515 小时前
【小程序】微信开发者工具上调用api接口可以,到了线上调用发现提示wx.request调用报错,原来是https协议问题
网络协议·小程序·https
爱隐身的官人17 小时前
微信小程序反编译教程
微信小程序·小程序·小程序反编译
G佳伟18 小时前
你好,因用户投诉并经平台审核,发现账号已发布的服务所选类目与小程序运营内容不符合,亲测有效
小程序
计算机徐师兄18 小时前
Java基于SpringBoot的智慧校园管理系统小程序【附源码、文档说明】
java·微信小程序·小程序·智慧校园管理系统小程序·java智慧校园管理系统小程序·智慧校园管理系统微信小程序·智慧校园管理微信小程序
毕设源码-赖学姐18 小时前
【开题答辩全过程】以 宝贝回家网微信小程序为例,包含答辩的问题和答案
微信小程序·小程序
说私域1 天前
开源AI智能名片赋能下微商商业模式的创新路径研究——以链动2+1模式与S2B2C商城小程序融合为例
人工智能·小程序·开源
pearbing1 天前
B站排名优化:知识、娱乐、生活类内容的差异化实操策略
人工智能·微信·小程序·生活·娱乐