Best Practices of Mini Programs-Customizing the Navigation Bar (1)

Every practice in the article is actually applied in my own project, so this article is absolutely practical. The content of each practice is described in three parts: basic configuration, main logic code, and how to apply

Customize the navigation bar

basic configuration

// 单页面配置page.json
{
    "navigationStyle": "custom",
   // 其它配置项
  "navigationBarTextStyle":""
}

// 全局配置app.json
{
    "window":{
        "navigationStyle": "custom",
    // 其它配置项
    "navigationBarTextStyle":""  
    }
}

Note 1: Regarding navigationStyle

• For iOS/Android client versions below 7.0.0, navigationStyle only takes effect app.json
• Starting from version 6.7.2 of iOS/Android client, navigationStyle: custom for web-view component
• After opening custom, the lower version client needs to be compatible. The basic library version of the developer tools is cut to 1.7.0 (does not represent the minimum version, only for debugging), which can easily cut to the old vision
• For Windows client version 3.0 and above, in order to provide users with a more consistent experience with desktop software, the navigation bar of the applet window has been unified, and navigationStyle: custom no longer valid.

Component packaging

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"
}

Practical application

Introduce the component JSON file of the page that needs to be used

{
    "usingComponents": {
        "nav-bar":"component/navBar/index"
    },
}

Used in the WXML file of the page

<view class="page">
    <!--自定义导航栏navBar-->
    <nav-bar>
        <text class='nav-bar-title-text'>标题内容</text>
    </nav-bar>
</view>

other

refers to API

// 获取设备基础信息
wx.getSystemInfoSync()

// 获取右上角胶囊的布局位置信息
wx.getMenuButtonBoundingClientRect()

extension

In addition to the basic custom navigation bar above, we can also make special customizations to the navigation bar, such as placing a search box in the navigation bar, date selection, time, date and weather information, etc.