- 在 app.json 文件中设置导航栏的样式:
"window": {
"navigationStyle": "custom"
},
"usingComponents": {
"nav-bar": "/components/navbar/navbar"
}
- 在app.js中获取设备顶部窗口的高度
App({
onLaunch: function (options) {
var _this = this;
wx.getSystemInfo({
success: (res) => {
let custom = wx.getMenuButtonBoundingClientRect()
_this.globalData.statusBarHeight = res.statusBarHeight
_this.globalData.navTop = custom.top
_this.globalData.navHeight = custom.height
}
})
},
globalData: {
statusBarHeight: 0,
navTop: 0,
navHeight:0,
},
})
- 创建navbar组件
<view class='nav-wrap nav-bgc-class' style='height: {{navHeight }}px;top:{{navTop}}px;position:fixed;'>
<view class='nav-capsule' style=' height: {{navHeight}}px;' wx:if='{{navbarData.showCapsule}}' bindtap='_navback'>
<image class='back-pre ex-back-pre' src='{{navbarData.backSrc || "/assets/arrow.png"}}' mode='aspectFill'></image>
</view>
<view class='nav-title nav-title-class' style=' height: {{navHeight}}px;' wx:if='{{navbarData.title&&!navbarData.titleHide}}'>{{navbarData.title}}</view>
<view class='nav-title nav-title-class' style='height: {{navHeight}}px;' wx:if="{{!navbarData.titleHide&&!navbarData.title}}"><image src="/assets/logo.png" alt="" class="nav-logo"/></view>
</view>
const app = getApp()
Component({
// multipleSlots 为组件开启多插槽模式
options: {
multipleSlots: true,
},
// properties 组件用来储存外部数据
properties: {
navbarData: { //navbarData 由父页面传递的数据,变量名字自命名
type: Object,
value: {},
observer: function (newVal, oldVal) {}
},
},
// 组件用来储存内部私有数据
data: {
// 自定义导航栏的高度
statusBarHeight: app.globalData.statusBarHeight,
navBarHeight: app.globalData.navBarHeight,
navTop: app.globalData.navTop
},
// attached函数 当组件进入页面节点树时触发,可以使用setData,绝大多数初始化工作在这个时机进行
attached: function () {},
methods: {
// 返回键,触发自定义事件,将返回的事件交给父级页面来分情况定义
_navback() {
this.triggerEvent('goBack')
}
}
})
{
"usingComponents": {},
"component": true
}
.nav-wrap {
position: fixed;
width: 100%;
top: 0;
left: 0;
right: 0;
background: #F0F0F0;
z-index: 9999;
transform: translate3d(0, 0, 0);
}
.nav-capsule {
width: 140rpx;
display: flex;
align-items: center;
position: absolute;
left: 20rpx;
top: 0;
bottom: 0;
margin: auto;
}
.back-pre {
width: 40rpx;
height: 40rpx;
}
.nav-title {
position: absolute;
left: 0;
right: 0;
bottom: 0;
max-width: 360rpx;
margin: auto;
display: flex;
align-items: center;
justify-content: space-around;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: #45494D;
font-size: 24rpx;
font-weight: 600;
}
.nav-title .nav-logo {
width: 99rpx;
height: 41rpx;
}
- 页面引用
<view style="padding-top: {{navTop}}px">
<nav-bar bind:goBack="_goBack" navbar-data='{{nvabarData}}'></nav-bar>
</view>
import {
request
} from '../../utils/request'
const app = getApp()
let pageIndex = 1
Page({
/**
* 页面的初始数据
*/
data: {
navTop:app.globalData.navTop,
nvabarData: {
showCapsule: 1,//是否显示左上角图标 1表示显示 0表示不显示
title: '首页',
backSrc:'' //如果传入左上角使用传入的图片否则使用返回图标
},
},
_goBack() {
let pages = getCurrentPages(); //获取当前页面pages里的所有信息。
console.log(pages, "pages")
let prevPage = pages[pages.length - 2]; //prevPage 是获取上一个页面的js里面的pages的所有信息。 -2 是上一个页面,-3是上上个页面以此类推。
prevPage.setData({ // 将我们想要传递的参数在这里直接setData。上个页面就会执行这里的操作。
chooseValue: this.data.chooseValue
})
//上一个页面内执行setData操作,将我们想要的信息保存住。当我们返回去的时候,页面已经处理完毕。
//最后就是返回上一个页面。
wx.navigateBack({
delta: 1 // 返回上一级页面。
})
}
}