您现在的位置是：网站首页> 编程资料编程资料
微信小程序自定义导航的方法_javascript技巧_
2023-05-24
410人已围观
简介 微信小程序自定义导航的方法_javascript技巧_
本文实例为大家分享了微信小程序自定义导航的具体代码，供大家参考，具体内容如下
在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
{{title}}
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
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
您可能感兴趣的文章:
