微信小程序自定义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 相关文章推荐
MultiSelect左右选择控件的设计与实现介绍
Jun 08 Javascript
表格奇偶行设置不同颜色的核心JS代码
Dec 24 Javascript
js选择并转移导航菜单示例代码
Aug 19 Javascript
JavaScript不使用prototype和new实现继承机制
Dec 29 Javascript
原生js实现图片层叠轮播切换效果
Feb 02 Javascript
jq实现左滑显示删除按钮,点击删除实现删除数据功能(推荐)
Aug 23 Javascript
ReactNative Image组件使用详解
Aug 07 Javascript
jQuery Position方法使用和兼容性
Aug 23 jQuery
vue.js 实现图片本地预览 裁剪 压缩 上传功能
Mar 01 Javascript
vue项目前端错误收集之sentry教程详解
May 27 Javascript
vue中keep-alive内置组件缓存的实例代码
Apr 16 Javascript
tracking.js实现前端人脸识别功能
Apr 16 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/10 PHP
php使用ICQ网关发送手机短信
2013/10/30 PHP
ThinkPHP Mobile使用方法简明教程
2014/06/18 PHP
php安装ssh2扩展的方法【Linux平台】
2016/07/20 PHP
PHP 进度条函数的简单实例
2017/09/19 PHP
支持汉转拼和拼音分词的PHP中文工具类ChineseUtil
2018/02/23 PHP
php使用mysqli和pdo扩展,测试对比连接mysql数据库的效率完整示例
2019/05/09 PHP
在多个页面使用同一个HTML片段的代码
2011/03/04 Javascript
jQuery插件EnPlaceholder实现输入框提示文字
2015/06/05 Javascript
jQuery layui常用方法介绍
2016/07/25 Javascript
JS不完全国际化&amp;本地化手册 之 理论篇
2016/09/27 Javascript
浅谈jquery的html方法里包含特殊字符的处理
2016/11/30 Javascript
原生js获取浏览器窗口及元素宽高常用方法集合
2017/01/18 Javascript
Angular.JS利用ng-disabled属性和ng-model实现禁用button效果
2017/04/05 Javascript
利用JavaScript对中文(汉字)进行排序实例详解
2017/06/18 Javascript
JavaScript运行原理分析
2018/02/09 Javascript
Node.js使用MySQL连接池的方法实例
2018/02/11 Javascript
js中el表达式的使用和非空判断方法
2018/03/28 Javascript
vue之延时刷新实例
2019/11/14 Javascript
举例区分Python中的浅复制与深复制
2015/07/02 Python
python使用udp实现聊天器功能
2018/12/10 Python
Django发送邮件和itsdangerous模块的配合使用解析
2019/08/10 Python
python 中的paramiko模块简介及安装过程
2020/02/29 Python
Python通过len函数返回对象长度
2020/10/22 Python
一套C++笔试题面试题
2012/06/06 面试题
材料化学应届生求职信
2013/10/09 职场文书
幼儿园园长岗位职责
2013/11/26 职场文书
幼儿园保育员责任书
2014/07/22 职场文书
2014年政教处工作总结
2014/12/20 职场文书
银行自荐信范文
2015/03/25 职场文书
二手房购房意向书
2015/05/09 职场文书
2015大一新生军训感言
2015/08/01 职场文书
小学秋季运动会通讯稿
2015/11/25 职场文书
践行三严三实心得体会(2016推荐篇)
2016/01/06 职场文书
入党转正申请书范文
2019/05/20 职场文书
Python 批量下载阴阳师网站壁纸
2021/05/19 Python