微信小程序自定义导航
沐笙959 人气:0在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>
加载全部内容