概要
微信小程序自定义导航栏,有返回和回到首页,复制即用
修改配置
- 既然使用自定义导航栏样式,就把默认的导航栏取消掉
//app.json 文件下设置
"window": {
"navigationStyle": "custom"
},
获取各种手机设备的状态栏的高度
// app.js 文件
App({
onLaunch: function (res) {
// 处理手机信息
this.handleSystemInfo()
},
globalData: {
navHeight: '',
statusHeight: '',
model: '',
},
handleSystemInfo () {
let sysinfo = wx.getStorageSync('sysinfo')
if(!sysinfo) {
sysinfo = wx.getSystemInfoSync()
wx.setStorageSync('sysinfo', sysinfo)
}
this.globalData.model = sysinfo.model
this.globalData.statusHeight = sysinfo.statusBarHeight
if (!sysinfo.system.indexOf('iOS') > -1) {
// 32px + 8px * 2 = 48px
this.globalData.navHeight = 48 + this.globalData.statusHeight
} else {
// 32px + 6px * 2 = 44px
this.globalData.navHeight = 44 + this.globalData.statusHeight
}
},
})
自定义导航栏组件 navBar组件
- wxml文件
<!--navBar.wxml-->
<cover-view class='nav' style='height:{{navH}}px'>
<cover-view class='title_icon' wx:if="{{showLeft}}">
<cover-image class='navtopImg' aria-role="button" src='/assets/image/interest/topbar-back.png' mode='aspectFit' class='back' bindtap='navBack'/>
<cover-view class='shuxian'></cover-view>
<cover-image class='navtopImg' aria-role="{{button}}" src='/assets/image/interest/topbar-index.png' mode='aspectFit' class='home' bindtap='navHome'/>
</cover-view>
<cover-view class='title_text'>
<cover-view class='title_name'>{{title}}</cover-view>
</cover-view>
</cover-view>
<!-- 撑起盒子的高度 -->
<cover-view class='kong' style='height:{{navH}}px'></cover-view>
wxml文件使用了cover-view,目的是防止项目中video等标签层级过高,覆盖了navBar组件的层级
- wxss文件
/* components/navBar/navTop.wxss */
.nav {
width: 100%;
overflow: hidden;
position: fixed;
top: 0;
left: 0;
z-index: 10;
background: #fff;
}
.title_text {
width: 100%;
height: 45px;
line-height: 45px;
text-align: center;
position: absolute;
bottom: 0;
left: 0;
z-index: 10;
font-size: 34rpx;
}
.title_icon {
position: absolute;
bottom: 10rpx;
left: 10rpx;
border-radius: 70rpx;
box-sizing: border-box;
border: 0.5px solid #eaeaea;
display: flex;
z-index: 20;
}
.title_icon cover-image {
display: inline-block;
overflow: hidden;
width: 48rpx;
height: 48rpx;
padding: 8rpx 20rpx;
text-align: center;
}
.title_icon .shuxian {
height: 18px;
border-left: 1px solid #eaeaea;
margin-top: 6px;
}
.title_name {
font-family: PingFangSC-Medium;
font-size: 36rpx;
color: #333;
letter-spacing: 0;
text-align: center;
line-height: 48rpx;
display: inline;
}
- js 文件
// components/navTop/navBar.js
const App = getApp(); //获取实例拿到状态栏高度
Component({
options: {
},
/**
* 组件的属性列表
*/
properties: {
title: String,
showLeft: {
type: Boolean,
value: true
}
},
/**
* 组件的初始数据
*/
data: {
},
lifetimes: {
attached: function () {
this.setData({
navH: App.globalData.navHeight
})
}
},
/**
* 组件的方法列表
*/
methods: {
// 返回上一页
navBack: function () {
wx.navigateBack({
delta: 1
})
},
//回到首页
navHome: function () {
wx.reLaunch({
url: '/pages/index/index'
})
},
}
})
导入组件
- 因为navBar组件在全部页面都有使用,所以全局导入
//app.json 文件
"usingComponents": {
"nav-bar": "/components/navBar/navBar"
}
在页面里使用组件
<nav-top title="测试"></nav-top>
导航栏.png
左边的返回和回到首页的样式是默认展示出来,如果想不要出现
<!--左边的工具栏就会隐藏-->
<nav-top title="测试" showLeft="{{false}}"></nav-top>
动动手指点赞
如果这篇文章对你有用,请给我点个赞,让我更加有动力写下去,谢谢
