自定义微信小程序顶部导航栏（自适应微信胶囊按钮，flex布局）

在之前完成的小程序项目中，遇到微信顶部导航栏高度，在不同手高度不一样问题（不适配微信胶囊按钮）。总结了一下特发这篇文章整理思路

问题

一个前端，肯定不希望页面结构不好看。客户、老板、自己不满意啊

解决方法

通过uni.getSystemInfo获取系统信息（用来手机状态栏高度），因为状态栏的高度不同的手机是不一样的，状态栏如下
通过uni.getMenuButtonBoundingClientRect()获取微信小程序胶囊按钮的信息（top：胶囊按钮上边界坐标、height：胶囊按钮的高度）
通过wx.getSystemInfoSync()把px转化为rpx，因为uni.getSystemInfo和uni.getMenuButtonBoundingClientRect()获取的数据单位都是px

关键代码

uni.getSystemInfo({success: function(e) {let myStatusBar = 0let myCustomBar = 0let myNvaMartom = 0let myNavHeight = 0let custom = uni.getMenuButtonBoundingClientRect();myStatusBar = e.statusBarHeight;myNavHeight = custom.heightmyNvaMartom = custom.top - e.statusBarHeightmyCustomBar = (myNvaMartom * 2 + custom.height) - 2that.StatusBar = myStatusBar * 750 / wx.getSystemInfoSync().windowWidth;that.CustomBar = (myCustomBar * 750 / wx.getSystemInfoSync().windowWidth)+12;that.NvaMartom = myNvaMartom * 750 / wx.getSystemInfoSync().windowWidth;that.NavHeight = myNavHeight * 750 / wx.getSystemInfoSync().windowWidth;that.Page_MagTOP = that.CustomBar + that.StatusBarconsole.log("顶部状态栏高度", that.StatusBar)console.log("导航栏高度", that.CustomBar)console.log("胶囊按钮上边距", that.NvaMartom)console.log("胶囊按钮高度", that.NavHeight)console.log("页面内容距离顶部的上边距,导航栏全部高度", that.Page_MagTOP)}})

顶部导航栏肯定用的多啊，所以要封装起来，定义为公共组件

components/Status_bar/Status_bar.vue

<template><view class=""><view :style="{'height':Page_MagTOP+'rpx'}" style="width: 750rpx;"></view><view class="status_bar_my " :style="{'height':StatusBar+'rpx','background-color':Statusbar_top_bgc}"></view><view class="" style="width: 750rpx;position: fixed;z-index: 16000;" :style="{'top':StatusBar+'rpx','height':CustomBar+'rpx'}"><view class="page_title_ii" style="z-index: 999;" :style="{'height':CustomBar+'rpx','background-color':Statusbar_bgc,'color':color}"><view class="" style="width: 50rpx;" @tap="childMethod()" :style="{'height':NavHeight+'rpx','line-height':NavHeight+'rpx'}"><span class="iconfont" v-if='iSTotheArrow' style="font-size: 34rpx;font-weight: 700;" :style="{'color':color}">&#xe601;</span></view><text class="font-size-tile" :style="{'height':NavHeight+'rpx','line-height':NavHeight+'rpx'}" style="">{{HeadLineTitle}}</text><view class="navigateBackrr"></view></view></view></view>
</template><script>export default {props: {HeadLineTitle: {type: String,default: '顶部标题'},Statusbar_top_bgc: {type: String,default: '#fff'},Statusbar_bgc: {type: String,default: '#fff'},color: {type: String,default: '#000'},fatherMethod: {type: Function,default: null},iSTotheArrow: {type: Boolean,default: true}},data() {return {StatusBar: 0,CustomBar: 0,NvaMartom: 0,NavHeight: 0,Page_MagTOP: 0,}},methods: {childMethod() {if (this.fatherMethod) {this.fatherMethod()}}},mounted() {let that = thisuni.getSystemInfo({success: function(e) {let myStatusBar = 0let myCustomBar = 0let myNvaMartom = 0let myNavHeight = 0let custom = uni.getMenuButtonBoundingClientRect();myStatusBar = e.statusBarHeight;myNavHeight = custom.heightmyNvaMartom = custom.top - e.statusBarHeightmyCustomBar = (myNvaMartom * 2 + custom.height) - 2that.StatusBar = myStatusBar * 750 / wx.getSystemInfoSync().windowWidth;that.CustomBar = (myCustomBar * 750 / wx.getSystemInfoSync().windowWidth)+12;that.NvaMartom = myNvaMartom * 750 / wx.getSystemInfoSync().windowWidth;that.NavHeight = myNavHeight * 750 / wx.getSystemInfoSync().windowWidth;that.Page_MagTOP = that.CustomBar + that.StatusBar}})this.$emit("ZXNavigtionHeigth",that.Page_MagTOP)this.$emit("ZXStatusBar",that.StatusBar)this.$emit("ZXNavHeight",that.NavHeight)}}
</script><style lang="scss">.status_bar_my {position: fixed;top: 0rpx;height: var(--status-bar-height);width: 750rpx;z-index: 1000;background-color: #ffffff;}
=.page_title_ii {display: flex;justify-content: space-between;align-items: center;font-size: 36rpx;z-index: 999;padding: 0 25rpx;.navigateBackrr {width: 50rpx;height: 50rpx;}}
</style>

iSTotheArrow接收父组件的方法方法，（退出页面箭头的方法）
this.$emit()触发实例上的方法，把公共组件的值传给父组件

调用

导入再注册import Status_bar from '@/components/Status_bar/Status_bar.vue'
使用<StatusBar HeadLineTitle='账户设置' Statusbar_top_bgc='#f63434' Statusbar_bgc='#f63434' color='#fff' :fatherMethod='fatherMethod'></StatusBar>

效果图

iPhone 5

iPhone XS Max

自定义微信小程序顶部导航栏（自适应微信胶囊按钮，flex布局）相关推荐

微信小程序顶部导航栏自定义，根据不同手机自适应距离状态栏高度，防止标题栏高度歪歪扭扭
微信小程序顶部导航栏自定义,根据不同手机自适应距离状态栏高度一.微信小程序顶部导航栏自定义 "navigationStyle": "custom" app. ...
微信小程序顶部导航栏样式设置（自定义）
效果: 一.要用自定义的导航栏需要在app.json中配置(必须) 取消自带的导航栏:"navigationStyle": "custom" 目前微信小程序不支 ...
微信小程序顶部导航栏点击选项产生颜色变化和底部下划线显示
在很多程序中都有一个功能,就是顶部导航栏点击的时候能自动切换页面,并且选中的模块会变换颜色并且底部出现一条横线. 首先思考这个功能的实现原理--通过"点击"这个动作,我们能知道点击 ...
微信小程序顶部导航栏颜色修改
1.单个页面,在该页面的json文件里修改 (1)修改导航栏颜色: "navigationBarBackgroundColor": "#1556D2", 去除导 ...
微信小程序顶部导航栏
效果图 1.wxml  <view class="navbar"><text wx:for="{{navbar}}&qu ...
微信小程序头部导航栏自定义
微信小程序头部导航栏自定义参考网址微信开放文档 navigationStyle导航栏样式:仅支持以下值:default默认样式,custom 自定义导航栏,只保留右上角胶囊按钮配置示例 {&quo ...
微信小程序navigationBarTitleText导航栏标题设置
微信小程序navigationBarTitleText导航栏标题设置全局设置 app.json "window": { "navigationBarTextStyle& ...
微信小程序tabBar导航栏页和其他页执行onLoad与onShow时机；tabBar页获取不到参数问题；navigateTo跳转无效问题；onShow执行两次问题；
1.注意点: 只有五种情况会触发导航栏tabBar页的onLoad函数,分别是: –1.1:首次进入到导航栏tabBar页面: –1.2:从微信分享进入的导航栏tabBar页面: –1.3:识别二维码 ...
微信小程序之导航栏样式修改、自定义导航栏及封装
在微信小程序中我们会经常看到不同字样的顶部标题,这样的样式有的是一样的,而有的却又是不同的导航栏,这是怎么回事呢,在这里我们就探讨一下.(微信小程序json文件不能有注释,复制过去的时候有注释记得自行 ...
小程序顶部导航栏标题不居中
小程序默认在andriod中居左,ios中居中解决方法:自定义导航栏 ♦ 小程序去掉顶部导航栏 window: {backgroundTextStyle: 'light',navigationBar ...

自定义微信小程序顶部导航栏（自适应微信胶囊按钮，flex布局）

问题

解决方法

关键代码

顶部导航栏肯定用的多啊，所以要封装起来，定义为公共组件

调用

效果图

自定义微信小程序顶部导航栏（自适应微信胶囊按钮，flex布局）相关推荐

最新文章

热门文章