文中的每一条实际都是在本人我的项目当中实在利用的，所以说，本文相对实用。每一条实际的内容我依照三个局部来说：根本配置，次要逻辑代码，如何利用
自定义导航栏
根本配置
// 单页面配置page.json{ "navigationStyle": "custom", // 其它配置项 "navigationBarTextStyle":""}// 全局配置app.json{ "window":{ "navigationStyle": "custom", // 其它配置项 "navigationBarTextStyle":"" }}注 1：对于
navigationStyle
- iOS/Android 客户端 7.0.0 以下版本，
navigationStyle只在app.json中失效。- iOS/Android 客户端 6.7.2 版本开始，
navigationStyle: custom对 web-view 组件有效- 开启 custom 后，低版本客户端须要做好兼容。开发者工具根底库版本切到 1.7.0（不代表最低版本，只供调试用）可不便切到旧视觉
- Windows 客户端 3.0 及以上版本，为了给用户提供更合乎桌面软件的应用体验，对立了小程序窗口的导航栏，
navigationStyle: custom不再失效
组件封装
wxml
// navBar.wxml <view style="height:{{navigationHei}}px; top:{{navigationTop}}px; padding-left:{{paddingLeft}}px" class="nav-bar"> <view class="nav-bar-left"> <!--返回按钮标签--> <image bindtap="back" src="{{imgArrow}}" class="nav-bar-arrow" mode=""></image> <!-- 左上角文字 --> <text class="nav-bar-left-text">返回</text> </view> <!--题目内容--> <view class="nav-bar-content"> <slot></slot> </view></view>wxss
// navBar.wxss 款式.nav-bar{ position: fixed; width:100vw; left:0; top:0; background: chartreuse; box-sizing: border-box;}.nav-bar-left{ display: flex; height: 100%; align-items: center;}.nav-bar-arrow{ width:19rpx; height: 34rpx; margin:0 24rpx;}.nav-bar-left-text{ font-size:33rpx; color: #fff;}.nav-bar-content{ position: absolute; left:0; top:0; width:100%; height: 100%; display: flex; align-items: center; justify-content: center;}js
Component({ properties: {}, data: { navigationTop: 0, // 导航栏顶部高度 navigationHei: 20, // 导航栏高度 paddingLeft: 0, // 导航栏做内边距 imgArrow: "http://m.jqtianxia.cn/rubbish/common/icon-arrow-left.png" // 返回箭头 }, ready: function () { // 状态栏高度 const {screenWidth,statusBarHeight} = wx.getSystemInfoSync(); // 胶囊按钮 const {height,top,right} = wx.getMenuButtonBoundingClientRect(); // 右边内边距 const paddingLeft = screenWidth - right; const navigationHei = (top - statusBarHeight) * 2 + height; this.setData({ navigationTop: statusBarHeight, navigationHei, paddingLeft }) }, methods: { back: function () { wx.navigateBack({ delta: 1, }) } }})json
{ "usingComponents": {}, "navigationStyle":"custom", "navigationBarTextStyle":"black"}实际利用
在须要用的页面的JSON文件中引入组件
{ "usingComponents": { "nav-bar":"component/navBar/index" },}在页面的WXML文件中应用
<view class="page"> <!--自定义导航栏navBar--> <nav-bar> <text class='nav-bar-title-text'>题目内容</text> </nav-bar></view>其它
波及API
// 获取设施根底信息wx.getSystemInfoSync()// 获取右上角胶囊的布局地位信息wx.getMenuButtonBoundingClientRect()扩大
除了下面根底的自定义导航栏，咱们还能够对导航栏进行非凡的定制，比方在导航栏搁置搜寻框，日期抉择，工夫，日期和天气信息等