微信小程序自定义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 相关文章推荐
JS this作用域以及GET传输值过长的问题解决方法
Aug 06 Javascript
jQuery获取页面及个元素高度、宽度的总结——超实用
Jul 28 Javascript
7个jQuery最佳实践
Jan 12 Javascript
JavaScript实现输入框与清空按钮联动效果
Sep 09 Javascript
浅谈js的异步执行
Oct 18 Javascript
利用Node.JS实现邮件发送功能
Oct 21 Javascript
分析javascript中9 个常见错误阻碍你进步
Sep 18 Javascript
详解vue 单页应用(spa)前端路由实现原理
Apr 04 Javascript
详解ES6系列之私有变量的实现
Nov 21 Javascript
Vue-CLI项目中路由传参的方式详解
Sep 01 Javascript
vue实现的多页面项目如何优化打包的步骤详解
Jul 19 Javascript
vue使用v-model进行跨组件绑定的基本实现方法
Apr 28 Vue.js
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实现paypal整合方法
2010/11/28 PHP
PHP判断数据库中的记录是否存在的方法
2014/11/14 PHP
php中mkdir函数用法实例分析
2014/11/15 PHP
PHP清除字符串中所有无用标签的方法
2014/12/01 PHP
PHP二维数组排序简单实现方法
2016/02/14 PHP
php抽奖概率算法(刮刮卡,大转盘)
2020/04/17 PHP
JavaScript Archive Network 集合
2007/05/12 Javascript
wordpress之js库集合研究介绍
2007/08/17 Javascript
javascript变量作用域使用中常见错误总结
2013/03/26 Javascript
如何解决jQuery EasyUI 已打开Tab重新加载问题
2016/12/19 Javascript
微信小程序 chooseImage选择图片或者拍照
2017/04/07 Javascript
jQuery EasyUI 为Combo,Combobox添加清除值功能的实例
2017/04/13 jQuery
了解javascript中的Dom操作
2019/05/27 Javascript
layui switch 开关监听 弹出确定状态转换的例子
2019/09/21 Javascript
如何利用JavaScript编写更好的条件语句详解
2020/08/10 Javascript
在Python的Django框架中simple-todo工具的简单使用
2015/05/30 Python
python实现跨excel的工作表sheet之间的复制方法
2018/05/03 Python
用Python将一个列表分割成小列表的实例讲解
2018/07/02 Python
使用python list 查找所有匹配元素的位置实例
2019/06/11 Python
使用python-Jenkins批量创建及修改jobs操作
2020/05/12 Python
Python xlrd/xlwt 创建excel文件及常用操作
2020/09/24 Python
Python创建自己的加密货币的示例
2021/03/01 Python
全球知名的婚恋交友网站:Match.com
2017/01/05 全球购物
美国时尚在线:Showpo
2017/09/08 全球购物
英国时尚女装购物网站:Missguided
2018/08/23 全球购物
MAC Cosmetics官方网站:魅可专业艺术彩妆
2019/04/10 全球购物
俄罗斯皮肤健康中心:Pharmacosmetica.ru
2020/02/22 全球购物
用C或者C++语言实现SOCKET通信
2015/02/24 面试题
大专学生推荐信范文
2013/11/19 职场文书
不打扫卫生检讨书
2014/02/12 职场文书
《植物妈妈有办法》教学反思
2014/02/25 职场文书
出国留学经济担保书
2014/04/01 职场文书
正风肃纪查摆剖析材料
2014/10/10 职场文书
2015年重阳节活动主持词
2015/07/30 职场文书
财务会计个人原因辞职信
2019/06/21 职场文书
Python可变与不可变数据和深拷贝与浅拷贝
2022/04/06 Python