微信小程序自定义导航栏

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

文章目录

• 前言
• 一、制作微信小程序导航栏？
• 二、使用步骤
  • 1.引入库
  • 2.读入数据
• 总结

---

前言

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

---

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

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

第一:  

关闭导航栏，如果是单页面需要就写在对应页面的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>

 以下是文档的事件，及返回的参数

属性 类型 默认值 必填 说明 success function 否 接口调用成功的回调函数 fail function 否 接口调用失败的回调函数 complete function 否 接口调用结束的回调函数（调用成功、失败都会执行） object.success 回调函数 参数

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

属性	类型	说明	最低版本
brand	string	设备品牌	1.5.0
model	string	设备型号。新机型刚推出一段时间会显示unknown，微信会尽快进行适配。
pixelRatio	number	设备像素比
screenWidth	number	屏幕宽度，单位px	1.1.0
screenHeight	number	屏幕高度，单位px	1.1.0
windowWidth	number	可使用窗口宽度，单位px
windowHeight	number	可使用窗口高度，单位px
statusBarHeight	number	状态栏的高度，单位px	1.9.0
language	string	微信设置的语言
version	string	微信版本号
system	string	操作系统及版本
platform	string	客户端平台
fontSizeSetting	number	用户字体大小（单位px）。以微信客户端「我-设置-通用-字体大小」中的设置为准	1.5.0
SDKVersion	string	客户端基础库版本	1.1.0
benchmarkLevel	number	设备性能等级（仅 Android）。取值为：-2 或 0（该设备无法运行小游戏），-1（性能未知），>=1（设备性能值，该值越高，设备性能越好，目前最高不到50）	1.8.0
albumAuthorized	boolean	允许微信使用相册的开关（仅 iOS 有效）	2.6.0
cameraAuthorized	boolean	允许微信使用摄像头的开关	2.6.0
locationAuthorized	boolean	允许微信使用定位的开关	2.6.0
microphoneAuthorized	boolean	允许微信使用麦克风的开关	2.6.0
notificationAuthorized	boolean	允许微信通知的开关	2.6.0
notificationAlertAuthorized	boolean	允许微信通知带有提醒的开关（仅 iOS 有效）	2.6.0
notificationBadgeAuthorized	boolean	允许微信通知带有标记的开关（仅 iOS 有效）	2.6.0
notificationSoundAuthorized	boolean	允许微信通知带有声音的开关（仅 iOS 有效）	2.6.0
phoneCalendarAuthorized	boolean	允许微信使用日历的开关	2.19.3
bluetoothEnabled	boolean	蓝牙的系统开关	2.6.0
locationEnabled	boolean	地理位置的系统开关	2.6.0
wifiEnabled	boolean	Wi-Fi 的系统开关	2.6.0
safeArea	Object	在竖屏正方向下的安全区域	2.7.0
locationReducedAccuracy	boolean	true 表示模糊定位，false 表示精确定位，仅 iOS 支持
theme	string	系统当前主题，取值为light或dark，全局配置"darkmode":true时才能获取，否则为 undefined （不支持小游戏）	2.11.0
host	Object	当前小程序运行的宿主环境	2.12.3
enableDebug	boolean	是否已打开调试。可通过右上角菜单或 wx.setEnableDebug 打开调试。	2.15.0
deviceOrientation	string	设备方向

---

总结

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