微信小程序自定义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 相关文章推荐
jquery中checkbox全选失效的解决方法
Dec 26 Javascript
浅谈javascript构造函数与实例化对象
Jun 22 Javascript
jQuery模拟360浏览器切屏效果幻灯片(附demo源码下载)
Jan 29 Javascript
js正则表达式replace替换变量方法
May 21 Javascript
Jquery为DIV添加click事件的简单实例
Jun 02 Javascript
jquery判断页面网址是否有效的两种方法
Dec 11 Javascript
JavaScript数据结构之双向链表定义与使用方法示例
Oct 27 Javascript
Angular异步变同步处理方法
Aug 13 Javascript
Vue中的验证登录状态的实现方法
Mar 09 Javascript
微信小程序设置全局请求URL及封装wx.request请求操作示例
Apr 02 Javascript
JavaScript使用面向对象实现的拖拽功能详解
Jun 12 Javascript
javascript的var与let,const之间的区别详解
Feb 18 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
模仿OSO的论坛(四)
2006/10/09 PHP
探讨:使用XMLSerialize 序列化与反序列化
2013/06/08 PHP
Drupal7中常用的数据库操作实例
2014/03/02 PHP
php根据用户名和手机号查询是否存在手机号码
2017/02/16 PHP
js 替换功能函数,用正则表达式解决,js的全部替换
2010/12/08 Javascript
JS实现左右拖动改变内容显示区域大小的方法
2015/10/13 Javascript
深入分析node.js的异步API和其局限性
2016/09/05 Javascript
D3.js中强制异步文件读取同步的几种方法
2017/02/06 Javascript
jQuery简单实现遍历单选框的方法
2017/03/06 Javascript
html5+canvas实现支持触屏的签名插件教程
2017/05/08 Javascript
vue父组件向子组件动态传值的两种方法
2017/11/11 Javascript
Vue实现用户自定义字段显示数据的方法
2018/08/28 Javascript
微信小程序日历插件代码实例
2019/12/04 Javascript
微信小程序 scroll-view 实现锚点跳转功能
2019/12/12 Javascript
Vue初始化中的选项合并之initInternalComponent详解
2020/06/11 Javascript
ant-design-vue 时间选择器赋值默认时间的操作
2020/10/27 Javascript
vue组件添加事件@click.native操作
2020/10/30 Javascript
[35:29]Secret vs VG 2018国际邀请赛淘汰赛BO3 第三场 8.23
2018/08/24 DOTA
python实现调用其他python脚本的方法
2014/10/05 Python
Python中如何使用if语句处理列表实例代码
2019/02/24 Python
pytz格式化北京时间多出6分钟问题的解决方法
2019/06/21 Python
PyQt5实现暗黑风格的计时器
2019/07/29 Python
pytorch 预训练层的使用方法
2019/08/20 Python
Python的缺点和劣势分析
2019/11/19 Python
Python+Appium实现自动化测试的使用步骤
2020/03/24 Python
django API 中接口的互相调用实例
2020/04/01 Python
python爬虫scrapy图书分类实例讲解
2020/11/23 Python
CSS3近阶段篇之酷炫的3D旋转透视
2016/04/28 HTML / CSS
html5教程画矩形代码分享
2013/12/04 HTML / CSS
解决html5中的video标签ios系统中无法播放使用的问题
2020/08/10 HTML / CSS
进修护士自我鉴定
2013/10/14 职场文书
CNC数控操作工岗位职责
2013/11/19 职场文书
常务副县长“三严三实”对照检查材料思想汇报
2014/10/05 职场文书
Java tomcat手动配置servlet详解
2021/11/27 Java/Android
基于Apache Hudi在Google云构建数据湖平台的思路详解
2022/04/07 Servers
vue实现input输入模糊查询的三种方式
2022/08/14 Vue.js