【小程序】自定义顶部导航栏

 

需求：在小程序非tab页上顶部导航栏上加一个返回按钮

 

在app.js中

App({
    onLaunch: function () {
        let that = this;
        wx.getSystemInfo({//获取系统信息
            success: function(res) {
                that.globalData.statusBarHeight = res.statusBarHeight;//获取状态栏的高度，单位px
            },
        })
    },
    globalData: {
        auntName:'',
        backPath:'',
        pathType:''
    },
})

在内页面上

json页面（custom 自定义导航栏，只保留右上角胶囊按钮）

{
    "navigationStyle":"custom"
}

wxml页面

<view class="halfPage" style="padding-top:{{statusBarHeight}}px; height:44px; '100%; background:red" >
    <view bindtap="goback" class="arrowbox" wx:if="{{backPath!=''}}">
        <view class="arrow" ></view>
    </view>
</view>

wxss页面上

.halfPage{
     100%;
    background-color: #fff;
    position: fixed;
    top: 0;
    display: flex;
    align-items: center;
    z-index: 9999;
}
.halfPage .arrowbox{
    height: 44px;
     max-content;
    display: flex;
    align-items: center;
}
.halfPage .arrow{
     20rpx;
    height:20rpx;
    border-left: 4rpx solid #000;
    border-top: 4rpx solid #000;
    transform: rotate(-45deg);
    margin-left: 30rpx;
    margin-right: 20rpx;
}

js页面中

const app = getApp()
Page({


/**
* 页面的初始数据
*/
data: {
    backPath:'',
    statusBarHeight: getApp().globalData.statusBarHeight,
},
goback() {
    app.globalData.pathType = 'order';
    wx.navigateTo({
        url: this.data.backPath,
    })
},
onLoad: function (options) {
    if (options.id) {
        this.setData({
            staff_id: options.id
        })
    }
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
    　　 app.globalData.pathType = '';
        if (app.globalData.backPath!=''){
            this.setData({
                backPath: app.globalData.backPath
            })
        }else{
            this.setData({
                backPath: ''
            })
        }
},
})