微信小程序自定义头部导航栏

沉浸式导航头

要用自定义的导航栏首先需要将页面设置成沉浸式导航，在该页面的json文件中配置navigationStyle，如果是所有页面都需要沉浸式，则在app.json中设置

{"navigationBarTitleText": "测试","navigationStyle": "custom"  // 沉浸式导航头
}

创建组件目录

navigationBar.wxml文件：

<view class='nav-wrap' style='top: {{top}}rpx; height: {{height}}rpx; line-height: {{height}}rpx'>  //top是右侧胶囊菜单距离手机顶部的距离 height是胶囊菜单的高度，可以设置导航与胶囊菜单同高<view class='nav-title' style='width: {{left - 36}}rpx'>  // left是除去胶囊菜单所剩的宽度，36是图上返回图标的宽度，可自行修改<image class='nav-title-back' src="../../image/back.png" wx:if="{{showBack}}" catchtap="goBack"></image><view class='nav-title-text'>{{title}}</view></view>
</view>

navigationBar.wxss文件：

.nav-wrap {position: fixed;width: 100%;background: transparent;z-index: 9999999;
}
.nav-title {padding-left: 16px;display: flex;flex-direction: row;align-items:center;
}
.nav-title-back {width: 32rpx;height: 32rpx;flex: 0 0 32rpx;margin-right: 4rpx;
}
.nav-title-text {flex: 1 1 auto;font-size: 34rpx;color: #fff;font-weight: bold;
}

navigationBar.json文件（组件必须）：

{"component": true
}

navigationBar.js文件：

Component({properties: {title: {type: String,value: true},showBack: {type: Boolean,value: true}},data: {top: 0,left: 0,height: 0,},lifetimes: {attached: function() {// 在组件实例进入页面节点树时执行wx.getSystemInfo({success: (res) => {const ratio = 750 / res.windowWidthconst menuInfo = wx.getMenuButtonBoundingClientRect();this.setData({top:  menuInfo.top * ratio ,left: menuInfo.left * ratio , height: menuInfo.height * ratio ,})}})},},methods: {goBack() {if (this.properties.showBack) {wx.navigateBack()}},}
});

在微信小程序页面中引用
页面文件夹index.wxml文件：

<navigation-bar title="自定义导航头" showBack="{{true}}"></navigation-bar> // title是标题，showBack是是否需要显示返回按钮

index.json文件：

{"navigationBarTitleText": "测试","usingComponents": {"navigation-bar": "../../components/navigationBar/navigationBar"},"navigationStyle": "custom"  // 沉浸式导航头
}

此外，若遇到胶囊信息报错或者获取不到，请查看兼容方法

微信小程序自定义头部导航栏相关推荐

（转载）微信小程序自定义头部导航栏
本文转载自微信小程序自定义头部导航栏微信小程序自定义头部导航栏先看下demo的效果: 最终要实现的效果: 在tabbar页面不显示左侧按钮: 分享出去的页面进入后不显示左侧返回按钮: 点击返回按钮 ...
微信小程序 - 自定义头部导航栏组件（详解） + iphoneX以上遮挡小黑条适配问题
1. 导航栏计算: 导航栏总高度=状态栏高度+胶囊高度+(胶囊距顶距离-胶囊高度)*2 navHeight = statusBarHeight + menuButtonObject.height + ...
微信小程序自定义头部导航栏
1.微信自定义头部:app.json里面配置: "navigationStyle": "custom" 2.建立一个navigationBar的公共组件: A. ...
微信小程序自定义顶部导航栏标题 navigationStyle
微信小程序自定义顶部导航栏标题单页面自定义导航栏修改需要自定义的页面,的页面配置.json文件全部页面自定义导航修改公共页面配置app.json 单页面自定义导航栏修改需要自定义的页面,的 ...
uniapp开发微信小程序自定义顶部导航栏
自定义导航栏渐变色,先上效果使用uniapp开发小程序,在不同界面,要去对页面进行修改顶部导航栏. 比如说要去定义导航栏的背景颜色,常规的去定义导航栏背景颜色全局定义导航栏 "windo ...
原声微信小程序自定义顶部导航栏 . 自定义navigationBar。 (单页面设置)
本文实例为大家分享了微信小程序自定义导航栏的具体代码,供大家参考,具体内容如下实现自定义大致需要以下?步骤: 1.在页面.JSON文件进行相关配置,以便去掉原生 "navigationSt ...
微信小程序自定义搜索导航栏
自定义微信小程序导航栏因为项目需要,要实现如京东小程序类似的搜索导航栏-下图所示搜索框在导航栏中.参考了官方API最终实现了该有的效果,顺便吧此次实现的思路和代码记录下来. 一.拆解分析按照正常的 ...
微信小程序自定义tabbar导航栏，中间凸出样式
这种样式的底部导航栏使用微信小程序的自定义tabBar:微信小程序官方说明 uni.app=>在 page.json 中的 tabBar 项指定 custom 字段为true: "t ...
小程序自定义头部导航栏(“navigationStyle“: “custom“)，自定义tabBar
一.自定义顶部导航 1.在某些时候,不想要自带的顶部导航栏,需要自己定义,这时可以将自定义的导航栏做成一个组件,然后做一下初始配置,在每个页面引用,初始化,即可得到一个自定义的顶部导航栏: 2.代码部 ...
微信小程序自定义navigation-bar导航栏(自适应安卓苹果)
最近在写商城,中途遇到了需要自定义修改导航栏的操作,大概是如下图接过样子的,于是想手写一份,但我发现右上角的分享按钮在不同设备离顶部的距离是不一样的,于是找了下官方划水员写的文档(点这里查看),(⊙o ...

微信小程序自定义头部导航栏

微信小程序自定义头部导航栏相关推荐

最新文章

热门文章