1.在app.js文件中,获取导航高度等信息:
// app.js App({ 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.jnheight = menuButtonObject.height;//胶囊的高度 this.globalData.jnwidth = menuButtonObject.width;//胶囊的宽度 }, fail(err) { console.log(err); } }); }, //设置全局对象 globalData: { navHeight: 0, navTop: 0, jnheight: 0, jnwidth: 0, } })
2.新建组件navbar文件夹
navbar.wxml
<!--components/navbar.wxml--> <view class="navbar {{bgshow==0?'bg':'bg1'}}" style="height:{{navHeight+5}}px;"> <!-- 左上角 返回按钮 和 home按钮 wx:if="{{showNav}}" 是控制左上角按钮的显示隐藏,首页不显示 --> <view class="navbar_left" style="top:{{navTop}}px;height:{{jnheight-1}}px;width:{{jnwidth-3}}px" wx:if="{{showNav}}"> <!-- 控制返回按钮的显示 --> <view bindtap="navBack"> <image src="../../images/back.png" mode="widthFix" style="width:40%"></image> </view> <!-- home按钮 wx:if="{{showHome}}" 是控制左上角 home按钮的显示隐藏--> <view class="nav_line" bindtap="navHome" wx:if="{{showHome}}"> <image src="../../images/backhome.png" mode="widthFix" style="width:50%"></image> </view> </view> <!-- 中间标题 --> <view class="navbar_title" style="top:{{navTop}}px;">{{pageName}}</view> </view>
navbar.js
const App = getApp(); Component({ // 组件的属性列表 properties: { pageName: String, //中间的title showNav: { //判断是否显示左上角的按钮 type: Boolean, value: false }, showHome: { //判断是否显示左上角的home按钮 type: Boolean, value: false }, bgshow: { //判断背景时候变化 type: Number, value: 0 } }, // 组件的初始数据 data: { showNav: true, //判断是否显示左上角的home按钮 showHome: true, //判断是否显示左上角的按钮 }, lifetimes: { // 生命周期函数,可以为函数,或一个在methods段中定义的方法名 attached: function() { this.setData({ navHeight: App.globalData.navHeight, //导航栏高度 navTop: App.globalData.navTop, //胶囊按钮与顶部的距离 jnheight: App.globalData.jnheight, //胶囊高度 jnwidth: App.globalData.jnwidth //胶囊宽度 }) } }, // 组件的方法列表 methods: { //回退 navBack: function() { wx.navigateBack() }, //回主页 navHome: function() { wx.switchTab({ url: '/pages/home/home' }) }, } })
navbar.wxss
/* components/navbar.wxss */ .navbar { width: 100%; overflow: hidden; position: sticky; top: 0; left: 0; z-index: 10; flex-shrink: 0; background: #fff; } .bg{ background-image: url('http://zz.com/image/index.jpg'); } .bg1{ background-image: url('http://zz.com/image/index.jpg'); } .navbar_left { display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; position: absolute; left: 10px; z-index: 11; line-height: 1; border: 1rpx solid #f0f0f0; border-radius: 40rpx; overflow: hidden; background: rgba(255, 255, 255, 0.6); } .navbar_left view { width: 50%; display: flex; align-items: center; justify-content: center; } .nav_line { border-left: 1rpx solid #f0f0f0; } .navbar_title { width: 100%; box-sizing: border-box; padding-left: 115px; padding-right: 115px; height: 32px; line-height: 32px; text-align: center; position: absolute; left: 0; z-index: 10; color: #333; font-size: 16px; font-weight: bold; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
3.设置navigationStyle": “custom”,可全局设置自定义导航,也可以单页面设置
我这里是全局 在app.json中
"window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "Weixin", "navigationBarTextStyle": "black", "navigationStyle": "custom" },
4.页面引用组件
在json文件中:
{ "usingComponents":{ "navbar":"/components/navbar/navbar" } }
在wxml中
<navbar page-name="{{navbar.shoppingName}}" show-bg="{{navbar.bgshow}}"></navbar>
js中:
data:{ navbar:{ shoppingName:'首页', bgshow:0, }, }