Are you still worried about the applets custom navigation bar?

Let me start with my requirements, because our little program is nested with a WebView. When you click on an item in the WebView, the hierarchy of the points is too deep, and the user has trouble backing up. Then PM found a custom navigation applet, found someone else could, and I started researching.

Small program custom navigation bar development notes and reference documents

How to calculate the height of non – custom navigation bar?

configuration

    "window": {        
        "navigationBarBackgroundColor": "#fff"."navigationBarTextStyle": "black"."backgroundColor": "#fff"."navigationStyle": "custom"    
    },Copy the code

NavigationStyle configuration is changed to a single capsule button, which means that all page navigation is custom implementation, you can choose to template or component development, I chose to use the component development.

And then I define the values of the navigation, and I’m in my app. Js

        title_height: "64".statusbarHeight: "24".titleIcon_height: "32".titleIcon_width: "87".title_top: "24".title_text: "xxx".// iphone X + 24        
        prefix: 24
Copy the code

component

WXML code

<view>  
    <view class="title" style="height:{{title_height}}px; padding-top:{{statusbarHeight}}px; background-color:{{isIndex? '#175dc6':'#fff'}}">   
    <view class="title_text" style="color:{{isIndex? '#fff':'#000'}}">{{title_text}}</view>    
        <view wx:if="{{isShow}}" class="title_icon" style="top:{{title_top}}px; height:{{titleIcon_height}}px; width:{{titleIcon_width}}px; background-color:{{isIndex? '#175dc6':'#fff'}}">      
            <image bindtap="_goBack" class="floatL" src="/img/fanhui_icon.png"></image>      
            <view class="floatL"></view>      
            <image bindtap="_goHome" src="/img/home_icon.png"></image>    
        </view>  
    </view>  
    <view style='height:{{title_height}}px; '></view>
</view>Copy the code

WXSS code

.title {  width: 100%;  background-color: #175dc6; box-sizing: border-box; position: fixed; transform: translateZ(0); z-index: 999990; }
.title_text {  text-align: center;  font-size: 37rpx;  color: #fff;  line-height: 44px;}
.title_icon {  background-color: #175dc6; position: fixed; top: 54rpx; left: 16rpx; border-radius: 64rpx; box-sizing: border-box; Border: 0.5 px solid # ebe48e; display: flex; }.title_icon image { height: 20px; width: 20px; padding-top: 5px; display: inline-block; overflow: hidden; } .title_icon view { height: 18px; border-left: 1px solid#bfb973;  margin-top: 6px;}
.floatL {  float: left; } .title_icon image:nth-of-type(1), .title_icon image:nth-of-type(2) { padding-right: 10px; padding-bottom: 10px; padding-left: 10px; }Copy the code

Js code

const app = getApp();
Component({    
    properties: {        
        isShow: { // Whether to display the back button
            type: String.value: "1"        
        },        
        isIndex: { // Whether the home page
            type: Boolean.value: false,},title_height: { //             
            type: String.value: app.config.title_height,        
        },        
        titleIcon_height: {            
            type: String.value: app.config.titleIcon_height,        
        },        
        titleIcon_width: {            
            type: String.value: app.config.titleIcon_width,        
        },        
        statusbarHeight: {            
            type: String.value: app.config.statusbarHeight,        
        },        
        title_top: {            
            type: String.value: app.config.title_top,        
        },        
        title_text: {            
            type: String.value: app.config.title_text,        
        },    
    },    
    methods: {        
        _goBack: function() {            
            wx.navigateBack({                
                delta: 1            
            });       
        },        
        _goHome: function() {            
            wx.switchTab({               
                url: "/pages/index/index"}); }}})Copy the code

And then the component is written and you just have to use that component to pass different values in each of your pages.

application

<header isIndex="true" title_text="Home page" isShow=""></header>WXML application on the home page. Configuration in json file"navigationBarTitleText": "La la la la"."navigationBarBackgroundColor": "#175dc6"."usingComponents": {    
                "header": "/components/layout/header/header"  
        }Copy the code

The effect is shown in figure

There may be some problems in the adaptation, I hope god has a better solution, let me know yo.

Step by step to record their own pit course ~ I want to do my technology is not the best, but I give you a summary of the small procedures of things is the most simple and crude ha ha ha

My blog

I accept the layout of this code, too lazy to do, I will post on the blog for everyone to see.

There are also some of my summary of small program notes to share to write small program you ~