【小程序】自定義頂部導航欄

 

需求：在小程序非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; width:'100%; background:red" >
    <view bindtap="goback" class="arrowbox" wx:if="{{backPath!=''}}">
        <view class="arrow" ></view>
    </view>
</view>

wxss頁面上

.halfPage{
    width: 100%;
    background-color: #fff;
    position: fixed;
    top: 0;
    display: flex;
    align-items: center;
    z-index: 9999;
}
.halfPage .arrowbox{
    height: 44px;
    width: max-content;
    display: flex;
    align-items: center;
}
.halfPage .arrow{
    width: 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: ''
            })
        }
},
})