效果大概就是這樣
自定義導(dǎo)航
//json文件配置
{
"navigationStyle": "custom",
"navigationBarTextStyle": "white",
"usingComponents": {
"return": "/component/return/return"
}
}
//wxml文件調(diào)用組件
<return></return>
組件部分
js
//js
/*
* 自定義導(dǎo)航欄返回按鈕
*/
const App = getApp();
Component({
/**
* 組件的屬性列表
*/
properties: {
},
/**
* 組件的初始數(shù)據(jù)
*/
data: {
},
lifetimes: {
attached: function () {
this.setData({
navTop: App.globalData.navTop
})
}
},
ready: function () {
},
/**
* 組件的方法列表
*/
methods: {
//返回上頁
backTo: function () {
wx.navigateBack({
delta: 1
})
}
}
})
wxml
<image src="/img/return.png" class="return-back" bindtap="backTo" style="top:{{navTop}}px"></image>
wxss
.return-back {
width: 20rpx;
height: 36rpx;
position: fixed;
left: 4rpx;
z-index: 9999;
padding: 20rpx;
}
app.js
//onLaunch
/**
* 自定義導(dǎo)航欄 返回按鈕位置計算
*/
let menuButtonObject = wx.getMenuButtonBoundingClientRect();
wx.getSystemInfo({
success: res => {
let statusBarHeight = res.statusBarHeight,
navTop = menuButtonObject.top, //膠囊按鈕與頂部的距離
navHeight = statusBarHeight + menuButtonObject.height + (menuButtonObject.top - statusBarHeight) * 2; //導(dǎo)航高度
this.globalData.navHeight = navHeight;
this.globalData.navTop = navTop;
this.globalData.windowHeight = res.windowHeight;
},
fail(err) {
console.log(err);
}
})
