小程序 ---- （自定义头部导航）

一、开发思路

二、实现过程

在小程序入口文件，app.js当中，键入以下代码（好好看注释，很容易明白）：

// app.js
App({onLaunch() {// 判断是否由分享进入小程序let options = wx.getLaunchOptionsSync();let scene = options.scene;console.log(scene, '1007/1008')// 获取胶囊按钮的高度和距离顶端的高度和标题let menubuttonHeight = wx.getMenuButtonBoundingClientRect().height;let menubuttonTop = wx.getMenuButtonBoundingClientRect().top;// 获取设备顶部状态栏的高度与状态栏的间隙高度wx.getSystemInfo({success: (result) => {// 套公式let statusHeight = (menubuttonTop - result.statusBarHeight) * 2 + menubuttonHeight + result.statusBarHeight;// 计算胶囊按钮和状态栏之间的间隙高度let menubuttonPadding = menubuttonTop - result.statusBarHeight;// 计算胶囊按钮中间到状态栏的距离，目的使标题文本与胶囊按钮上下居中对齐this.globalData.menubuttonPaddingTop = menubuttonPadding + (menubuttonHeight/2);this.globalData.navHeight = statusHeight;},})},globalData: {share: false,  // 分享默认为falsenavHeight: 0, // 导航栏的高度menubuttonPaddingTop: 0 // 标题与状态栏的间隙高度}
})

组件内，在index.wxml键入以下代码：

<!--components/nav/index.wxml--><view class="nav" style="min-height: {{navBarHeight}}px;background-color:{{bgColor}}">// 设置返回按钮<navigator open-type="navigateBack"><view wx:if="{{isBackShow}}" style="padding-bottom: {{paddingTop}}px;color: {{Color}};transform: translateY({{paddingTop}}%);" class="nav-icon-back iconfont icon-fanhui"></view></navigator>// 设置标题文本<view style="padding-bottom: {{paddingTop}}px;color: {{Color}};transform: translateY({{paddingTop}}%);" class="nav-title">{{navText}}</view>// 设置插槽，使标题更加灵活多变<slot name="content"></slot>
</view>

设置样式：

/* components/nav/index.wxss *//* 引入iconfont */
@import "/styles/iconfont.wxss";.nav {position: fixed;top: 0%;left: 0%;width: 100vw;display: flex;justify-content: flex-start;// 下面将文本放置到导航栏底部，再设置按钮中间到状态栏之间距离高度的margin-bottom，即可实现文本高度居中align-items: flex-end; color: white;font-size: 32.5rpx;z-index: 999999999;
}.nav-icon-back {margin-left: 24rpx;color: white;font-size: 30rpx;
}.nav-title {margin-left: 27rpx;
}

核心index.js文件中的配置：

// components/nav/index.jsconst app = getApp();Component({/*** 启用插槽*/options:{multipleSlots: true},/*** 组件的属性列表*/properties: {isBackShow: {type: Boolean,value: false},navText: {type: String,value: ''},bgColor: {type: String,value: ''},Color: {type: String,value: '#FFFFFF'}},/*** 组件的初始数据*/data: {navBarHeight: app.globalData.navHeight,paddingTop: app.globalData.menubuttonPaddingTop},/*** 组件的方法列表*/methods: {}
})

至此大功告成啦！去使用看看吧！接着看。

三、场景使用

既然是自定义头部导航，我的目的是全局引用的，所以要取消小程序本身的头部导航，然后在全局配置中，使用该组件，就不用每一个页面全部去引入使用了：

// app.json
"window": {"backgroundTextStyle": "dark","backgroundColor": "#EEEEEE","navigationStyle": "custom", // 这里设置取消"enablePullDownRefresh": false},"usingComponents": {"nav": "./components/nav/index", // 全局引用自定义导航"tabar": "./components/tabar/index" // 埋笔，下一篇讲自定义底部tabbar}

接着在pages中随意使用吧~

<nav isBackShow="true" navText="your title" bgColor="#286EF2"></nav>

小程序 ---- （自定义头部导航）相关推荐

（转载）微信小程序自定义头部导航栏
本文转载自微信小程序自定义头部导航栏微信小程序自定义头部导航栏先看下demo的效果: 最终要实现的效果: 在tabbar页面不显示左侧按钮: 分享出去的页面进入后不显示左侧返回按钮: 点击返回按钮 ...
微信小程序自定义头部导航nav
1.封装自定义nav导航组件 // app.js App({globalData: {systeminfo: false, //系统信息headerBtnPosi: false //头部菜单高度} } ...
微信小程序 - 自定义头部导航栏组件（详解） + iphoneX以上遮挡小黑条适配问题
1. 导航栏计算: 导航栏总高度=状态栏高度+胶囊高度+(胶囊距顶距离-胶囊高度)*2 navHeight = statusBarHeight + menuButtonObject.height + ...
小程序自定义头部导航栏(“navigationStyle“: “custom“)，自定义tabBar
一.自定义顶部导航 1.在某些时候,不想要自带的顶部导航栏,需要自己定义,这时可以将自定义的导航栏做成一个组件,然后做一下初始配置,在每个页面引用,初始化,即可得到一个自定义的顶部导航栏: 2.代码部 ...
微信小程序自定义头部导航栏
1.微信自定义头部:app.json里面配置: "navigationStyle": "custom" 2.建立一个navigationBar的公共组件: A. ...
微信小程序-自定义底部导航
代码地址如下: http://www.demodashi.com/demo/14258.html 一.前期准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.c ...
微信小程序自定义顶部导航栏标题 navigationStyle
微信小程序自定义顶部导航栏标题单页面自定义导航栏修改需要自定义的页面,的页面配置.json文件全部页面自定义导航修改公共页面配置app.json 单页面自定义导航栏修改需要自定义的页面,的 ...
uniapp开发微信小程序自定义顶部导航栏
自定义导航栏渐变色,先上效果使用uniapp开发小程序,在不同界面,要去对页面进行修改顶部导航栏. 比如说要去定义导航栏的背景颜色,常规的去定义导航栏背景颜色全局定义导航栏 "windo ...
原声微信小程序自定义顶部导航栏 . 自定义navigationBar。 (单页面设置)
本文实例为大家分享了微信小程序自定义导航栏的具体代码,供大家参考,具体内容如下实现自定义大致需要以下?步骤: 1.在页面.JSON文件进行相关配置,以便去掉原生 "navigationSt ...
微信小程序自定义头部标题导航栏
/*** 微信小程序头部自定义标题导航栏* * 参数:* pageTitle: 导航栏标题,默认不显示* navColor: 导航栏背景颜色,默认白色,透明为'transparent'属性值* noS ...

小程序 ---- （自定义头部导航）

小程序 ---- （自定义头部导航）

一、开发思路

二、实现过程

三、场景使用

小程序 ---- （自定义头部导航）相关推荐

最新文章

热门文章