效果大概就是这样
自定义导航
//json文件配置
{
"navigationStyle": "custom",
"navigationBarTextStyle": "white",
"usingComponents": {
"return": "/component/return/return"
}
}
//wxml文件调用组件
<return></return>
组件部分
js
//js
/*
* 自定义导航栏返回按钮
*/
const App = getApp();
Component({
/**
* 组件的属性列表
*/
properties: {
},
/**
* 组件的初始数据
*/
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
/**
* 自定义导航栏 返回按钮位置计算
*/
let menuButtonObject = wx.getMenuButtonBoundingClientRect();
wx.getSystemInfo({
success: res => {
let statusBarHeight = res.statusBarHeight,
navTop = menuButtonObject.top, //胶囊按钮与顶部的距离
navHeight = statusBarHeight + menuButtonObject.height + (menuButtonObject.top - statusBarHeight) * 2; //导航高度
this.globalData.navHeight = navHeight;
this.globalData.navTop = navTop;
this.globalData.windowHeight = res.windowHeight;
},
fail(err) {
console.log(err);
}
})