微信小程序自定义navigationBar顶部导航栏适配所有机型(附完整案例)


Posted in Javascript onApril 26, 2020

前言

navigationBar相信大家都不陌生把?今天我们就来说说自定义navigationBar,把它改变成我们想要的样子(搜索框+胶囊、搜索框+返回按钮+胶囊等)。

思路

  • 隐藏原生样式
  • 获取胶囊按钮、状态栏相关数据以供后续计算
  • 根据不同机型计算出该机型的导航栏高度,进行适配
  • 编写新的导航栏
  • 引用到页面

正文

一、隐藏原生的navigationBar

window全局配置里有个参数:navigationStyle(导航栏样式),default=默认样式,custom=自定义样式。

"window": {
	"navigationStyle": "custom"
}

让我们看看隐藏后的效果:

微信小程序自定义navigationBar顶部导航栏适配所有机型(附完整案例)

可以看到原生的navigationBar已经消失了,剩下孤零零的胶囊按钮,胶囊按钮是无法隐藏的。

二、准备工作

1.获取胶囊按钮的布局位置信息

我们用wx.getMenuButtonBoundingClientRect() 【官方文档】 获取胶囊按钮的布局位置信息,坐标信息以屏幕左上角为原点:

const menuButtonInfo = wx.getMenuButtonBoundingClientRect();

width height top right bottom left
宽度 高度 上边界坐标 右边界坐标 下边界坐标 左边界坐标

下面是官方给的示意图,方便大家理解几个坐标。

微信小程序自定义navigationBar顶部导航栏适配所有机型(附完整案例)

2.获取系统信息

用wx.getSystemInfoSync() 【官方文档】 获取系统信息,里面有个参数:statusBarHeight(状态栏高度),是我们后面计算整个导航栏的高度需要用到的。

const systemInfo = wx.getSystemInfoSync();

三、计算公式

我们先要知道导航栏高度是怎么组成的, 计算公式: 导航栏高度 = 状态栏到胶囊的间距(胶囊距上距离-状态栏高度) * 2 + 胶囊高度 + 状态栏高度 。

实例 【源码下载】

自定义导航栏会应用到多个、甚至全部页面,所以封装成组件,方便调用;下面是我写的一个简单例子:

app.js

App({
 onLaunch: function(options) {
  const that = this;
  // 获取系统信息
  const systemInfo = wx.getSystemInfoSync();
  // 胶囊按钮位置信息
  const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
  // 导航栏高度 = 状态栏到胶囊的间距(胶囊距上距离-状态栏高度) * 2 + 胶囊高度 + 状态栏高度
  that.globalData.navBarHeight = (menuButtonInfo.top - systemInfo.statusBarHeight) * 2 + menuButtonInfo.height + systemInfo.statusBarHeight;
  that.globalData.menuRight = systemInfo.screenWidth - menuButtonInfo.right;
  that.globalData.menuBotton = menuButtonInfo.top - systemInfo.statusBarHeight;
  that.globalData.menuHeight = menuButtonInfo.height;
 },
 // 数据都是根据当前机型进行计算,这样的方式兼容大部分机器
 globalData: {
  navBarHeight: 0, // 导航栏高度
  menuRight: 0, // 胶囊距右方间距(方保持左、右间距一致)
  menuBotton: 0, // 胶囊距底部间距(保持底部间距一致)
  menuHeight: 0, // 胶囊高度(自定义内容可与胶囊高度保证一致)
 }
})

app.json

{
 "pages": [
  "pages/index/index"
 ],
 "window": {
  "navigationStyle": "custom"
 },
 "sitemapLocation": "sitemap.json"
}

下面为组件代码: /components/navigation-bar/navigation-bar.wxml

<!-- 自定义顶部栏 -->
<view class="nav-bar" style="height:{{navBarHeight}}px;">
 <input class="search" placeholder="输入关键词!" style="height:{{menuHeight}}px; min-height:{{menuHeight}}px; line-height:{menuHeight}}px; left:{{menuRight}}px; bottom:{{menuBotton}}px;"></input>
</view>

<!-- 
 内容区域:
 自定义顶部栏用的fixed定位,会遮盖到下面内容,注意设置好间距
-->
<view class="content" style="margin-top:{{navBarHeight}}px;"></view>

/components/navigation-bar/navigation-bar.json

{
 "component": true
}

/components/navigation-bar/navigation-bar.js

const app = getApp()
Component({
 properties: {
  // defaultData(父页面传递的数据-就是引用组件的页面)
  defaultData: {
   type: Object,
   value: {
    title: "我是默认标题"
   },
   observer: function(newVal, oldVal) {}
  }
 },
 data: {
  navBarHeight: app.globalData.navBarHeight,
  menuRight: app.globalData.menuRight,
  menuBotton: app.globalData.menuBotton,
  menuHeight: app.globalData.menuHeight,
 },
 attached: function() {},
 methods: {}
})

/components/navigation-bar/navigation-bar.wxss

.nav-bar{ position: fixed; width: 100%; top: 0; color: #fff; background: #000;}
.nav-bar .search{ width: 60%; color: #333; font-size: 14px; background: #fff; position: absolute; border-radius: 50px; background: #ddd; padding-left: 14px;}

以下是调用页面的代码,也就是引用组件的页面: /pages/index/index.wxml

navigation-bar default-data="{{defaultData}}"></navigation-bar>

/pages/index/index.json

{
 "usingComponents": {
  "navigation-bar": "/components/navigation-bar/navigation-bar"
 }
}

/pages/index/index.js

const app = getApp();
Page({
 data: {
  // 组件参数设置,传递到组件
  defaultData: {
   title: "我的主页", // 导航栏标题
  }
 },
 onLoad() {
  console.log(this.data.height)
 }
})

效果图:

微信小程序自定义navigationBar顶部导航栏适配所有机型(附完整案例)

好了,以上就是全部代码了,大家可以文中复制代码,也可以 【下载源码】

,直接到开发者工具里运行,记得appid用自己的或者测试哦!

下面附几张其它小程序的效果图,大家也可以尝试照着做:

微信小程序自定义navigationBar顶部导航栏适配所有机型(附完整案例)微信小程序自定义navigationBar顶部导航栏适配所有机型(附完整案例)

总结

本文写了自定义navigationBar的一些基础性东西,里面涉及组件用法、参数传递、导航栏相关。

由于测试环境有限,大家在使用时如果发现有什么问题,希望及时反馈,以供及时更新帮助更多的人!

到此这篇关于微信小程序自定义navigationBar顶部导航栏适配所有机型(附完整案例)的文章就介绍到这了,更多相关小程序navigationBar顶部导航栏内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JavaScript聚焦于第一个字段的代码
Oct 15 Javascript
jquery统计复选框选中示例
Nov 05 Javascript
js实现连个数字相加而不是拼接的方法
Feb 23 Javascript
JS控制输入框内字符串长度
May 21 Javascript
js实现的捐赠管理完整实例
Jan 20 Javascript
JS仿Windows开机启动Loading进度条的方法
Feb 26 Javascript
ionic实现带字的toggle滑动组件
Aug 27 Javascript
Three.js如何实现雾化效果示例代码
Sep 27 Javascript
vue实现点击当前标签高亮效果【推荐】
Jun 22 Javascript
webpack开发环境和生产环境的深入理解
Nov 08 Javascript
Vue项目实现简单的权限控制管理功能
Jul 17 Javascript
微信小程序swiper左右扩展各显示一半代码实例
Dec 05 Javascript
javascript 使用sleep函数的常见方法详解
Apr 26 #Javascript
基于JavaScript实现十五拼图代码实例
Apr 26 #Javascript
小程序自定义导航栏兼容适配所有机型(附完整案例)
Apr 26 #Javascript
vue 使用 vue-pdf 实现pdf在线预览的示例代码
Apr 26 #Javascript
javascript设计模式 ? 访问者模式原理与用法实例分析
Apr 26 #Javascript
详解关于Vue单元测试的几个坑
Apr 26 #Javascript
es6函数之箭头函数用法实例详解
Apr 25 #Javascript
You might like
PHP无限分类代码,支持数组格式化、直接输出菜单两种方式
2011/05/18 PHP
在WordPress中实现发送http请求的相关函数解析
2015/12/29 PHP
PHP编程中尝试程序并发的几种方式总结
2016/03/21 PHP
thinkPHP实现多字段模糊匹配查询的方法
2016/12/01 PHP
Thinkphp 空操作、空控制器、命名空间(详解)
2017/05/05 PHP
PHP+Mysql+Ajax实现淘宝客服或阿里旺旺聊天功能(前台页面)
2017/06/16 PHP
JS函数验证总结(方便js客户端输入验证)
2010/10/29 Javascript
利用NodeJS的子进程(child_process)调用系统命令的方法分享
2013/06/05 NodeJs
JS实现简单的Canvas画图实例
2013/07/04 Javascript
nodejs中实现阻塞实例
2015/03/24 NodeJs
javascript实现表单提交后,提交按钮不可用的方法
2015/04/18 Javascript
javascript生成img标签的3种实现方法(对象、方法、html)
2015/12/25 Javascript
JavaScript_object基础入门(必看篇)
2016/06/13 Javascript
AngularJS实现表单验证功能
2017/01/09 Javascript
jQuery实现图片滑动效果
2017/03/08 Javascript
JS简单实现自定义右键菜单实例
2017/05/31 Javascript
webpack学习教程之publicPath路径问题详解
2017/06/17 Javascript
js基于FileSaver.js 浏览器导出Excel文件的示例
2017/08/15 Javascript
全新打包工具parcel零配置vue开发脚手架
2018/01/11 Javascript
Vue中的作用域CSS和CSS模块的区别
2018/10/09 Javascript
Vue.js + Nuxt.js 项目中使用 Vee-validate 表单校验
2019/04/22 Javascript
基于vue实现探探滑动组件功能
2020/05/29 Javascript
ES6中的类(Class)示例详解
2020/12/09 Javascript
vue 通过base64实现图片下载功能
2020/12/19 Vue.js
Python面向对象之接口、抽象类与多态详解
2018/08/27 Python
python 3.6.2 安装配置方法图文教程
2018/09/18 Python
Python最小二乘法矩阵
2019/01/02 Python
Python实现隐马尔可夫模型的前向后向算法的示例代码
2019/12/31 Python
tensorflow求导和梯度计算实例
2020/01/23 Python
浅析pip安装第三方库及pycharm中导入第三方库的问题
2020/03/10 Python
澳大利亚第一的设计师礼服租赁网站:GlamCorner
2017/08/13 全球购物
Top Villas美国:豪华别墅出租和度假屋
2018/07/10 全球购物
第二层交换机和路由器的区别?第三层交换机和路由器的区别?
2013/05/23 面试题
在求职信中如何凸显个人优势
2013/10/30 职场文书
尽职尽责村干部自我鉴定
2014/01/23 职场文书
秋季运动会广播稿(30篇)
2014/09/13 职场文书