Introduction to the development of custom navigation components for mpvue small and medium-sized programs (code example)

This article brings you an introduction to the development of custom navigation components for mpvue small and medium-sized programs (code examples). It has certain reference value. Friends in need can refer to it. I hope It will help you.

This note mainly records the ideas and applications of custom navigation in small programs based on mpvue. Share it to inspire others. If there are any fallacies or room for optimization, please feel free to share.

After the configuration item navigationStyle of the mini program is set to custom, the navigation bar only retains the capsule button in the upper right corner. The color and title text content can be customized. This can realize the personalized needs of the navigation bar. Practical applications such as immersion style video playback page, etc.

Versions after Mini Program 7.0.0 begin to support customizing the navigation bar of a single page. Set the navigationStyle of the page to custom is enough. The configuration method of mpvue is as follows:

Since the navigation bar heights of different operating systems and different models are different, the core problem to be solved by customizing the navigation bar is that different machines Compatibility issue with the height of the navigation bar in the model.

As shown in the picture above, the navigation bar consists of two parts: the status bar and the title bar. The status bar is the column used to display the time and network status. The status bar in full-screen (notch screen) models will be much higher than other screens: the ios system with notch screen is 44, and the others are 20, including pad. The values ​​​​for Android phones are even higher. We can get the height of the status bar (statusBarHeight) through WeChat's apiwx.getSystemInfo. The title bar height cannot be obtained through the mini program API. Through the test data of multiple models of the same level, we can basically calculate it according to 44px in ios and 48px in Android.
This will make it easier. After getting the status bar height through statusBarHeight, and then judging the current system and adding the corresponding title bar, you can get the correct navigation bar height.

HTML code in template: (Because the video component in the mini program has the highest level and will not be covered by ordinary HTML tags, the tag is used in all navigation bar components. .):

<template>
    <p>
        <!-- 占位栏 -->
        <cover-view> </cover-view>
        <!-- 导航栏主体 -->
        <cover-view>
            <!-- 状态栏 -->
            <cover-view></cover-view>
            <!-- 标题栏 -->
            <cover-view>
                <!-- home及后退键 -->
                <cover-view>
                    <cover-view>
                    <cover-image></cover-image>
                    </cover-view>
                    <cover-view></cover-view>
                    <cover-view>
                    <cover-image></cover-image>
                    </cover-view>
                </cover-view>
                <!-- 标题 -->
                <cover-view>{{title}}</cover-view>
            </cover-view>
        </cover-view>
    </p>
</template>

js code:

    beforeMount() {
        const self = this;
        wx.getSystemInfo({
            success(system) {
                console.log(`system:`, system);
                self.statusBarHeight = system.statusBarHeight;
                self.platform = system.platform;

                let platformReg = /ios/i;
                if (platformReg.test(system.platform)) {
                    self.titleBarHeight = 44;
                } else {
                    self.titleBarHeight = 48;
                }

                self.navBarHeight = self.statusBarHeight + self.titleBarHeight;
            }
        });
    },

Customizable content of the custom navigation bar: title text, text color, title bar background color, back button Whether to display the address of the home button. The sample code is as follows:

<navigation-bar></navigation-bar>

## Reference for this article: Basic Tutorial on WeChat Mini Program Development https://www.html.cn/study/20.html

The above is the detailed content of Introduction to the development of custom navigation components for mpvue small and medium-sized programs (code example). For more information, please follow other related articles on the PHP Chinese website!