小程序自定义导航栏兼容适配所有机型(附完整案例)


Posted in Javascript onApril 26, 2020

前言

大部分情况下我们都是使用微信官方自带的 navigationBar 配置 ,但有时候我们需要在导航栏集成搜索框、自定义背景图、返回首页按钮等。

思路

  • 隐藏官方导航栏
  • 获取胶囊按钮、状态栏相关数据以供后续计算
  • 根据不同机型计算导航栏高度
  • 编写新的导航栏
  • 页面引用自定义导航

正文

隐藏官方导航栏

隐藏导航栏可以全局配置,也可以单独页面配置,具体根据业务需求来。

小程序自定义导航栏兼容适配所有机型(附完整案例)

全局隐藏

//app.json
"window": {
 "navigationStyle": "custom"
}

页面隐藏

//page.json
{
 "navigationStyle": "custom"
}

获取胶囊按钮、状态栏相关数据以供后续计算

公式:导航栏高度 = 状态栏到胶囊的间距(胶囊距上边界距离-状态栏高度) * 2 + 胶囊高度 + 状态栏高度。 由公式得知,我们需要获取 状态栏高度 胶囊高度 胶囊距上距离

注:状态栏到胶囊的间距 = 胶囊到下边界距离。所以这里需要*2

小程序自定义导航栏兼容适配所有机型(附完整案例)

状态栏高度

wx.getSystemInfoSync() 官方API 可以获取系统相关信息, statusBarHeight 属性可以获取到状态栏高度

const statusBarHeight = wx.getSystemInfoSync().statusBarHeight;

胶囊高度和胶囊距上边界距离

wx.getMenuButtonBoundingClientRect() 官方API 可以获取菜单按钮胶囊按钮的布局位置信息。

小程序自定义导航栏兼容适配所有机型(附完整案例)

const menuButtonInfo = wx.getMenuButtonBoundingClientRect();//胶囊相关信息
const menuButtonHeight = menuButtonInfo.height //胶囊高度
const menuButtonTop = menuButtonInfo.top//胶囊距上边界距离

实例

一般情况下,我们需要在运用启动的初始化生命周期钩子进行计算相关的数据,也就是入口文件 app.jsonLaunch 生命周期钩子

//app.js
App({
 onLaunch: function () {
 this.setNavBarInfo()
 },
 
 globalData: {
 //全局数据管理
 navBarHeight: 0, // 导航栏高度
 menuBotton: 0, // 胶囊距底部间距(保持底部间距一致)
 menuRight: 0, // 胶囊距右方间距(方保持左、右间距一致)
 menuHeight: 0, // 胶囊高度(自定义内容可与胶囊高度保证一致)
 },

 /**
 * @description 设置导航栏信息
 */
 setNavBarInfo () {
 // 获取系统信息
 const systemInfo = wx.getSystemInfoSync();
 // 胶囊按钮位置信息
 const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
 // 导航栏高度 = 状态栏到胶囊的间距(胶囊距上距离-状态栏高度) * 2 + 胶囊高度 + 状态栏高度
 this.globalData.navBarHeight = (menuButtonInfo.top - systemInfo.statusBarHeight) * 2 + menuButtonInfo.height + systemInfo.statusBarHeight;
 this.globalData.menuBotton = menuButtonInfo.top - systemInfo.statusBarHeight;
 this.globalData.menuRight = systemInfo.screenWidth - menuButtonInfo.right;
 this.globalData.menuHeight = menuButtonInfo.height;
 }
})

页面引用自定义导航

//page.wxml
<view class="nav" style="height:{{navBarHeight}}px;">
 <!-- 胶囊区域 -->
 <view class="capsule-box" style="height:{{menuHeight}}px; min-height:{{menuHeight}}px; line-height:{{menuHeight}}px; bottom:{{menuBotton}}px;">
 <view class="nav-handle">
  <image class="nav-back-icon" src="/images/nav_back.png" bind:tap="navToBackLastPage"></image>
  <image class="nav-home-icon" src="/images/nav_home.png" bind:tap="navToHomePage"></image>
 </view>
 <view class="nav-title">导航标题</view>
 </view>
</view>
// page.js
const app = getApp()
Page({

 /**
 * 页面的初始数据
 */
 data: {
 navBarHeight: app.globalData.navBarHeight,//导航栏高度
 menuBotton: app.globalData.menuBotton,//导航栏距离顶部距离
 menuHeight: app.globalData.menuHeight //导航栏高度
 }

封装成组件

我们可能在各自的页面实现不一样的效果,比如在导航栏添加搜索框,日期等,这个时候我们就可以封装一个自定义组件,大大提高我们的开发效率。

小程序自定义导航栏兼容适配所有机型(附完整案例)

小程序自定义导航栏兼容适配所有机型(附完整案例)

新建component

// components/navigation/index.wxml
<view class="nav" style="height:{{navBarHeight}}px;">
 <view class="nav-main">
 <!-- 胶囊区域 -->
 <view 
  class="capsule-box" 
  style="height:{{menuHeight}}px; min-height:{{menuHeight}}px; line-height:{{menuHeight}}px; bottom:{{menuBotton}}px;left:{{menuRight}}px;"
 >
 <!-- 导航内容区域 -->
  <slot></slot>
 </view>
 </view>
</view>
// components/navigation/index.wxss
.nav {
 position: fixed;
 top: 0;
 left: 0;
 width: 100vw;
}
.nav-main {
 width: 100%;
 height: 100%;
 position: relative;
}
.nav .capsule-box {
 position: absolute;
 box-sizing: border-box;
 width: 100%;
}
// components/navigation/index.js
const app = getApp()
Component({
 /**
 * 组件的初始数据
 */
 data: {
 navBarHeight: app.globalData.navBarHeight, //导航栏高度
 menuRight: app.globalData.menuRight, // 胶囊距右方间距(方保持左、右间距一致)
 menuBotton: app.globalData.menuBotton,
 menuHeight: app.globalData.menuHeight
 }
})

页面引用

页面配置引入该自定义组件

//index.json
{
 "navigationStyle": "custom",
 "navigationBarTextStyle": "white",
 "usingComponents": {
 "navigation": "/components/Navigation/index"
 }
}

页面中使用

<!-- 自定义导航 -->
<navigation>
 <view class="current-date">
  <text>4月24日</text>
 </view>
</navigation>

总结

本文主要是写自定义导航基础的东西,重点在于怎么计算自定义导航的,具体的业务和样式还需要根据自身产品来设定。如有什么问题,欢迎提出一起学习。

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

Javascript 相关文章推荐
ExtJS PropertyGrid中使用Combobox选择值问题
Jun 13 Javascript
30个最好的jQuery 灯箱插件分享
Apr 25 Javascript
使用jquery实现div的tab切换实例代码
May 27 Javascript
浅析ajax请求json数据并用js解析(示例分析)
Jul 13 Javascript
学习Bootstrap组件之下拉菜单
Jul 28 Javascript
js选择器全面解析
Jun 27 Javascript
js数组去重的hash方法
Dec 22 Javascript
node thread.sleep实现示例
Jun 20 Javascript
优雅的使用javascript递归画一棵结构树示例代码
Sep 22 Javascript
js实现图片上传即时显示效果
Sep 30 Javascript
vue中echarts引入中国地图的案例
Jul 28 Javascript
Vue-router中hash模式与history模式的区别详解
Dec 15 Vue.js
vue 使用 vue-pdf 实现pdf在线预览的示例代码
Apr 26 #Javascript
javascript设计模式 ? 访问者模式原理与用法实例分析
Apr 26 #Javascript
详解关于Vue单元测试的几个坑
Apr 26 #Javascript
es6函数之箭头函数用法实例详解
Apr 25 #Javascript
es6数组之扩展运算符操作实例分析
Apr 25 #Javascript
es6函数之尾调用优化实例分析
Apr 25 #Javascript
es6函数之尾递归用法实例分析
Apr 25 #Javascript
You might like
利用PHP动态生成VRML网页
2006/10/09 PHP
一个分页的论坛
2006/10/09 PHP
如何使用脚本模仿登陆过程
2006/11/22 PHP
Could not load type System.ServiceModel.Activation.HttpModule解决办法
2012/12/29 PHP
浅谈PHP中foreach/in_array的使用
2015/11/02 PHP
Yii使用技巧大汇总
2015/12/29 PHP
php接口实现拖拽排序功能
2018/04/23 PHP
如何实现浏览器上的右键菜单
2006/07/10 Javascript
setTimeout和setInterval的深入理解
2013/11/08 Javascript
简介JavaScript中search()方法的使用
2015/06/06 Javascript
Jquery实现瀑布流布局(备有详细注释)
2015/07/31 Javascript
基于BootStarp的Dailog
2016/04/28 Javascript
基于JS实现导航条之调用网页助手小精灵的方法
2016/06/17 Javascript
js实现年月日表单三级联动
2020/04/17 Javascript
彻底学会Angular.js中的transclusion
2017/03/12 Javascript
JS实现的简单下拉框联动功能示例
2018/05/11 Javascript
jQuery移动端跑马灯抽奖特效升级版(抽奖概率固定)实现方法
2019/01/18 jQuery
微信实现自动跳转到用其他浏览器打开指定APP下载
2019/02/15 Javascript
vue中jsonp插件的使用方法示例
2020/09/10 Javascript
[06:25]DOTA2英雄梦之声_第17期_大地之灵
2014/06/20 DOTA
[01:07:13]TNC vs Pain 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
python实现2014火车票查询代码分享
2014/01/10 Python
PyCharm鼠标右键不显示Run unittest的解决方法
2018/11/30 Python
python实现的MySQL增删改查操作实例小结
2018/12/19 Python
python加密解密库cryptography使用openSSL生成的密匙加密解密
2020/02/11 Python
Python叠加矩形框图层2种方法及效果
2020/06/18 Python
Python Http请求json解析库用法解析
2020/11/28 Python
python爬虫工具例举说明
2020/11/30 Python
使用HTML5 Canvas API中的clip()方法裁剪区域图像
2016/03/25 HTML / CSS
英国运动风奢侈品购物网站:Maison De Fashion
2020/08/28 全球购物
分公司经理岗位职责
2013/11/11 职场文书
旷课检讨书500字
2014/10/14 职场文书
2015年消费者权益日活动总结
2015/02/09 职场文书
高中生综合素质评价范文
2015/08/18 职场文书
2019年教师入党申请书
2019/06/27 职场文书
python神经网络ResNet50模型
2022/05/06 Python