专栏首页前端技术分享小程序 - 如何自定义导航栏

小程序 - 如何自定义导航栏

思路

自定义导航栏高度组成:状态栏(绿色部分)、导航栏(蓝色部分)

状态栏

通过调用 wx.getSystemInfoSync 获取

const res = wx.getSystemInfoSync()
this.setData({
   statusBarHeight:res.statusBarHeight
})

导航栏

通过获取右上角胶囊的位置信息计算,navBarPadding为导航栏上下的间隙

let res = wx.getMenuButtonBoundingClientRect()
let navBarPadding = (res.top - this.data.setStatusBarHeight) * 2 
this.setData({
   navBarHeight: res.height + navBarPadding
})

代码

app.js:

App({
  onLaunch () {
     this.setStatusBarHeight()
     this.setNavBar()
  },
  //设置系统状态栏高度
  setStatusBarHeight(){
      try {
        const res = wx.getSystemInfoSync()
        this.globalData.statusBarHeight = res.statusBarHeight
      }catch(error){
        console.log(error)
      }
  },
  //设置导航栏height
  setNavBar(){
      let res = wx.getMenuButtonBoundingClientRect()
      let navBarPadding = (res.top - this.globalData.statusBarHeight) * 2 
      this.globalData.navBarHeight = res.height + navBarPadding
  }, 
  globalData: {
    statusBarHeight: 20,
    navBarHeight: 44
  }
})

wxml:

<view class="top-bar-wrap">
    <view class="top-bar-main" style="padding-top:{{statusBarHeight}}px;height:{{navBarHeight}}px">
        自定义导航栏
    </view>
</view>

wxss:

.top-bar-wrap{
    z-index: 9999;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}
.top-bar-main{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color:#fff;
}

js:

const app = getApp()
Component({
  data: {
    statusBarHeight: app.globalData.statusBarHeight,
    navBarHeight: app.globalData.navBarHeight
  }
})

最后

setStatusBarHeight、setNavBar这两个方法最好写到app.js中,获取好放在app.globalData中,这两个高度可能不止自定义导航栏需要用到。

比如使用了自定义导航栏的页面,因为自定义导航栏是fixed定位脱离文档流,导致整个页面就会上移,所以要给页面加上padding-top,高度跟自定义导航栏的高度一致,即 statusBarHeight + navBarHeight。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Vue - 简单实现一个命令式弹窗组件

    在日常工作中弹窗组件是很常用的组件,但用得多还是别人的,空闲时间就自己来简单实现一个弹窗组件

    WahFung
  • 点亮你的Vue技术栈,万字Nuxt.js实践笔记来了

    作为一位 Vuer(vue开发者),如果还不会这个框架,那么你的 Vue 技术栈还没被点亮。

    WahFung
  • 前端手写代码原理实现

    现在的前端门槛越来越高,不再是只会写写页面那么简单。模块化、自动化、跨端开发等逐渐成为要求,但是这些都需要建立在我们牢固的基础之上。不管框架和模式怎么变,把基础...

    WahFung
  • 安卓|Activity与fragment的相同与差异

    相信学过安卓开发的同学都知道Activity与fragment这两个控件,这两个是我们在安卓开发中经常遇到的问题,有些人不能够分清这两个的相同点以及他们的区别,...

    算法与编程之美
  • 移动端页面自适应解决方案:rem 布局篇

    假设设计妹妹给我们的设计稿尺寸为750 * 1340。结合网易、淘宝移动端首页html元素上的font-size属性,html5设计稿尺寸以及前端与设计之间协作...

    用户1272076
  • GCD信号量-dispatch_semaphore_t

    VV木公子
  • vue(web前段)属性计算

    在请求接口返回数据中增加调用方法 this.compuetedPercentage(response.data)

    用户2192970
  • 预告 | 超级产品力系列之《2020中国网络流量监测与分析产品研究报告》即将发布

    根据ESG调查显示,87%的公司企业使用网络流量分析(NTA)工具进行威胁检测与响应,43%认为网络流量分析是威胁检测与响应的第一道防线。

    FB客服

扫码关注云+社区

领取腾讯云代金券