[移动开发]微信小程序自定义导航栏

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

前言

如果自定义一个微信的导航栏

提示：以下是本篇文章正文内容，下面案例可供参考

一、制作微信小程序导航栏

第一:??

关闭导航栏，如果是单页面需要就写在对应页面的json内，如果全局需要就写在app.josn内。

{
  "usingComponents": {
},
 "navigationStyle": "custom"
}

二、使用步骤

1.获取导航栏高度

????????在微信小程序中有这样一个API，wx.getSystemInfoAsync

异步获取系统信息。需要一定的微信客户端版本支持，在不支持的客户端上，会使用同步实现来返回。

在成功回调内，返回的参数有，

????????其中我们制作导航栏,

将获取到的statusBarHeight，存储到data中，

wxml

<view class="navbar" style="{{'height: ' + navigationBarHeight}}">

</view>

app.js，在onload函数内写

wx.getSystemInfoAsync({
  success (res) {
    console.log(res.statusBarHeight)
  }
})

然后获取胶囊的高度，并存储到一个变量内

wx.getMenuButtonBoundingClientRect({
    
    success(res){

        console.log(res)
    }
})

然后 将胶囊的宽度留出来，

<view class="navbar" style="{{'height: ' + navigationBarHeight}}">

    <view  style="{{'width: ' + width}}">

    </view>

</view>

总结

提示：这里对文章进行总结：
例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。