微信小程序自定义导航的方法
作者：沐笙959
这篇文章主要为大家详细介绍了微信小程序自定义导航的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了微信小程序自定义导航的具体代码，供大家参考，具体内容如下
在app.js中获取状态栏信息和胶囊按钮信息
onLaunch() {
// 展示本地存储能力
const logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
wx.setStorageSync('logs', logs)
// 获取系统信息
this.globalData.systemInfo = wx.getSystemInfoSync();
// 获取状态栏高度
this.globalData.statusBarHeight = this.globalData.systemInfo.statusBarHeight
// 胶囊按钮位置信息
this.globalData.menuButtonInfo = wx.getMenuButtonBoundingClientRect();
// 获取导航栏高度
this.globalData.navBarHeight = this.globalData.menuButtonInfo.bottom + (this.globalData.menuButtonInfo.top - this.globalData.statusBarHeight)
},globalData: {
statusBarHeight: '',
menuButtonInfo: {},
navBarHeight:'',
systemInfo:''
},导航栏高度为胶囊底部位置+（胶囊顶部位置-状态栏高度）
将导航栏封装成组件
navigation-bar.js
properties: {
// 是否显示返回箭头
showBackArrow: {
type: Boolean,
value: true
},
// 是否自定义导航栏标题
customTitle: {
type: Boolean,
value: false
},
// 导航栏标题
title: {
type: String,
value: 'weixin'
},
// 是否自定义返回方法
customBack: {
type: Boolean,
value: false
}
},
data: {
navBarHeight:getApp().globalData.navBarHeight,
statusBarHeight:getApp().globalData.statusBarHeight,
menuButtonInfo:getApp().globalData.menuButtonInfo
},
methods: {
/** 点击返回按钮 */
back() {
if (this.data.customBack) {
this.triggerEvent('back')
} else {
wx.navigateBack({
delta: 0,
})
}
},
/** 点击导航栏标题事件 */
clickTitle(){
this.triggerEvent('clickTitle')
},
}navigation-bar.wxml
<view class="nav-bar" style="height:{{navBarHeight}}px;">
<view style="height:{{statusBarHeight}}px;"></view>
<view style="height:{{navBarHeight-statusBarHeight}}px;width:{{menuButtonInfo.left}}px;" class="nav-box">
<view class="back-arrow" wx:if="{{showBackArrow}}">
<van-icon name="arrow-left" color="#262626" size="40rpx" bindtap="back"></van-icon>
</view>
<view class="nav-title" style="width: {{showBackArrow?'calc(100% - 40rpx)':'100%'}};">
<text wx:if="{{!customTitle}}" bindtap="clickTitle">{{title}}</text>
<slot wx:if="{{customTitle}}"></slot>
</view>
</view>
</view>
<view style="height:{{navBarHeight}}px;"></view>navigation-bar.wxss
.nav-bar{
width: 100%;
position: fixed;
top: 0;
left: 0;
background-color: #ffffff;
z-index: 1000000;
}
.nav-box{
padding: 0 20rpx;
display: flex;
align-items: center;
}
.back-arrow{
width: 60rpx;
height: 100%;
display: flex;
align-items: center;
padding-top: 4rpx;
}
.nav-title{
height: 100%;
display: flex;
align-items: center;
font-size: 36rpx;
color: #262626;
font-weight: 600;
}使用
app.js
"window": {
"navigationStyle": "custom"
},
"usingComponents": {
"navigation-bar":"/components/navigation-bar/navigation-bar",
}.wxml
<navigation-bar title="打卡" customBack bind:back="backWorkPage"></navigation-bar>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。