NavigationBar navigationBar, compatible with all models

This article is first from personal blog: [FaxMiao personal blog], a focus on Web front-end development technology, focus on user experience, record the front-end drip, adhere to more original, for everyone to provide high quality technology blog!

preface

NavigationBar navigationBar navigationBar Today we will talk about customizing navigationBar and changing it to what we want it to look like (search box + capsule, search box + back button + capsule, etc.).

Train of thought

• Hide native styles
• Obtain capsule button, status bar related data for subsequent calculation
• Calculate the height of the navigation bar based on different models and adapt it
• Write a new navigation bar
• Reference to page

The body of the

Hide the native navigationBar

NavigationStyle, default= default, custom= custom

"window": {
	"navigationStyle": "custom"
}
Copy the code

Let’s take a look at the hidden effect:

Second, preparation

1. Obtain the layout and location information of the capsule button

We use wx. GetMenuButtonBoundingClientRect capsule button () to obtain the official documentation 】 【 the layout of the location information, coordinate information to the left upper corner of the screen for the origin:

const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
Copy the code

Below is the official schematic diagram, convenient for you to understand a few coordinates.

2. Obtain system information

Use wx.getSystemInfosync () to get the system information, which has a parameter: statusBarHeight, which is used to calculate the height of the navigation bar later.

const systemInfo = wx.getSystemInfoSync();
Copy the code

3. Calculation formula

We first need to know how the height of the navigation bar is composed, calculation formula: navigation bar height = the distance between the status bar and the capsule (capsule distance – status bar height) * 2 + capsule height + status bar height.

The instance【 原 文 】

The custom navigation bar can be applied to multiple or even all pages, so it is packaged as a component for easy invocation. Here’s a simple example I wrote:

app.js

App({
    onLaunch: function(options) {
        const that = this;
        // Obtain system information
        const systemInfo = wx.getSystemInfoSync();
        // Capsule button position information
        const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
        // Navigation bar height = Distance between status bar and capsule (distance between capsules - status bar height) * 2 + capsule height + status bar height
        that.globalData.navBarHeight = (menuButtonInfo.top - systemInfo.statusBarHeight) * 2 + menuButtonInfo.height + systemInfo.statusBarHeight;
        that.globalData.menuRight = systemInfo.screenWidth - menuButtonInfo.right;
        that.globalData.menuBotton = menuButtonInfo.top - systemInfo.statusBarHeight;
        that.globalData.menuHeight = menuButtonInfo.height;
    },
    // The data is calculated according to the current model, which is compatible with most machines
    globalData: {
        navBarHeight: 0.// Height of navigation bar
        menuRight: 0.// Capsule spacing to the right (keep left and right spacing consistent)
        menuBotton: 0.// Distance between capsule and bottom (keep the same distance between bottom)
        menuHeight: 0.// Capsule height (customized content can be consistent with capsule height)}})Copy the code

app.json

{
    "pages": [
        "pages/index/index"]."window": {
        "navigationStyle": "custom"
    },
    "sitemapLocation": "sitemap.json"
}
Copy the code

/components/navigation-bar/navigation-bar.wxml

<! --> <view class="nav-bar" style="height:{{navBarHeight}}px;">
    <input class="search" placeholder="Enter keywords!" style="height:{{menuHeight}}px; min-height:{{menuHeight}}px; line-height:{menuHeight}}px; left:{{menuRight}}px; bottom:{{menuBotton}}px;"></input> </view> <! --> <view class= > <view class="content" style="margin-top:{{navBarHeight}}px;"></view>
Copy the code

/components/navigation-bar/navigation-bar.json

{
  "component": true
}
Copy the code

/components/navigation-bar/navigation-bar.js

const app = getApp()
Component({
    properties: {
        // defaultData (the data passed by the parent page - that is, the page referencing the component)
        defaultData: {
            type: Object.value: {
                title: "I'm the default title"
            },
            observer: function(newVal, oldVal) {}}},data: {
        navBarHeight: app.globalData.navBarHeight,
        menuRight: app.globalData.menuRight,
        menuBotton: app.globalData.menuBotton,
        menuHeight: app.globalData.menuHeight,
    },
    attached: function() {},
    methods: {}})Copy the code

/components/navigation-bar/navigation-bar.wxss

.nav-bar{ position: fixed; width: 100%; top: 0; color: #fff; background: # 000; }.nav-bar .search{ width: 60%; color: # 333; font-size: 14px; background: #fff; position: absolute; border-radius: 50px; background: #ddd; padding-left: 14px; }Copy the code

Here is the code that calls the page, that is, the page referencing the component: /pages/index/index.wxml

<navigation-bar default-data="{{defaultData}}"></navigation-bar>
Copy the code

/pages/index/index.json

{
    "usingComponents": {
        "navigation-bar": "/components/navigation-bar/navigation-bar"}}Copy the code

/pages/index/index.js

const app = getApp();
Page({
    data: {
        // Component parameter Settings are passed to the component
        defaultData: {
            title: "My home page".// Navigation bar title
        }
    },
    onLoad() {
        console.log(this.data.height)
    }
})
Copy the code

Effect:

【 download 】

Here are some examples of other small programs you can try to follow:

conclusion

• This article writes some basic things to customize navigationBar, which involves component usage, parameter transfer, navigationBar related.
• Due to the limited testing environment, if you find any problems in use, we hope to timely feedback for timely update to help more people!
• If you have any questions, please leave a message in the comments section!