小程序自定义导航栏

小程序自定义导航栏🐤🐤

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_915918413 天前
iOS 上架全流程指南 iOS 应用发布步骤、App Store 上架流程、uni-app 打包上传 ipa 与审核实战经验分享
android·ios·小程序·uni-app·cocoa·iphone·webview
00后程序员张3 天前
iOS App 混淆与加固对比 源码混淆与ipa文件混淆的区别、iOS代码保护与应用安全场景最佳实践
android·安全·ios·小程序·uni-app·iphone·webview
破无差3 天前
《赛事报名系统小程序》
小程序·html·uniapp
00后程序员张3 天前
详细解析苹果iOS应用上架到App Store的完整步骤与指南
android·ios·小程序·https·uni-app·iphone·webview
海绵宝宝不喜欢侬3 天前
uniapp-微信小程序分享功能-onShareAppMessage
微信小程序·小程序·uni-app
2501_915106323 天前
Xcode 上传 ipa 全流程详解 App Store 上架流程、uni-app 生成 ipa 文件上传与审核指南
android·macos·ios·小程序·uni-app·iphone·xcode
亮子AI3 天前
【小程序】微信小程序隐私协议
微信小程序·小程序
weixin_177297220693 天前
短剧小程序系统开发:打造个性化娱乐新平台
小程序·娱乐·短剧
weixin_lynhgworld3 天前
剧本杀小程序系统开发:开启沉浸式社交娱乐新纪元
小程序·娱乐
~废弃回忆 �༄3 天前
mobx-miniprogram小程序的数据传输
小程序