Shulou(Shulou.com)06/01 Report--

In this article, the editor introduces in detail "WeChat Mini Programs how to achieve custom top navigation function". The content is detailed, the steps are clear, and the details are handled properly. I hope this "WeChat Mini Programs how to achieve custom top navigation function" article can help you solve your doubts. Let's follow the editor's ideas to slowly deepen, together to learn new knowledge.

Have the foundation

Vue framework

Mpvue framework

Global configuration

Locate the global app.json file and add the following to the configuration:

"navigationStyle": "custom"window": {"backgroundTextStyle": "light", "navigationBarBackgroundColor": "# fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle": "black", "navigationStyle": "custom" / / this configuration}

Component thinking

Use mpvue to develop Mini Program. A components folder will be generated under the src directory by default.

Since the custom component is used by all webview pages, it is classified as a common component

You can create a new common folder under the components folder to place public components, as follows:

├── src source code directory

│ ├── main.js entry js file

│ ├── app.json global configuration

│ ├── components components directory

│ │ └── common common components

└── topBar.vue Top Custom Navigation copy Code

Component content

Since the statusBarHeight value of different devices may be different, the height of the custom component depends on the statusBarHeight value.

Find the global App.vue file and execute the onLaunch life cycle of Mini Program (listening for Mini Program initialization)

The specific acquisition method is as follows:

Const that = thislet systemInfo = wx.getSystemInfoSync () that.setBarHeight (systemInfo.statusBarHeight)

The statusBarHeight value is stored through vuex. It is not clear how vuex is used in Mini Program. Please refer to mpvue how to use vuex.

The html-related structure of the .vue file is as follows:

{{title}}

The structural analysis is as follows, which can be regarded as two parts, one is the div; of class= "bar" positioned by fixed at the top, and the other is the p of class= "place-holder".

The reason for putting a p tag is that you do not have to consider the problem that the div of class= "bar" will obscure the content area every time you introduce topBar.vue.

So add the p tag height:80rpx; to the 6px of padding-top; exactly equal to the height of the div of class= "bar"

Because what is placed on the left side of the project is the function of entering the personal center, the avatar on the left must use button to obtain the authorization of user information.

At the same time, you need to consider that the left side is not the avatar, then you can use the props attribute of vue. The specific props value is shown in the following code. The default is the left arrow, indicating that the previous page is returned.

Props: {title: {type: String, required: true}, icon: {type: String, default: require ('@ static/icon/icon_back.png')}, way: {type: String, default: null}}

If way doesn't pass anything, no icon is displayed on the left.

If the way passes in a route to the personal center, follow the events above the button structure

If the way passes in 'back', the returned left arrow is displayed.

After reading this, the article "how to customize the top navigation function of WeChat Mini Programs" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself to understand it. If you want to know more about related articles, welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.