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


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 相关文章推荐
基于Jquery 解决Ajax请求的页面 浏览器后退前进功能,页面刷新功能实效问题
Dec 11 Javascript
详解JS中Array对象扩展与String对象扩展
Jan 07 Javascript
js实现页面跳转的五种方法推荐
Mar 10 Javascript
AngularJS基础 ng-mouseover 指令简单示例
Aug 02 Javascript
jQuery中slidedown与slideup方法用法示例
Sep 16 Javascript
Bootstrap 模态框(Modal)插件代码解析
Dec 21 Javascript
使用Vuex实现一个笔记应用的方法
Mar 13 Javascript
小程序云开发教程如何使用云函数实现点赞功能
May 18 Javascript
layui时间控件选择时间范围的实现方法
Sep 28 Javascript
微信小程序可滑动月日历组件使用详解
Oct 21 Javascript
nuxt 实现在其它js文件中使用store的方式
Nov 05 Javascript
最新最全的手机号验证正则表达式
Feb 24 Javascript
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中转义mysql语句的实现代码
2011/06/24 PHP
比file_get_contents稳定的curl_get_contents分享
2012/01/11 PHP
php实现博客,论坛图片防盗链的方法
2016/10/15 PHP
使用Zookeeper分布式部署PHP应用程序
2019/03/15 PHP
jquery mobile实现拨打电话功能的几种方法
2013/08/05 Javascript
JavaScript判断是否为数字的4种方法及效率比较
2015/04/01 Javascript
Javascript 是你的高阶函数(高级应用)
2015/06/15 Javascript
JavaScript数组去重的3种方法和代码实例
2015/07/01 Javascript
获取JS中网页各种高宽与位置的方法总结
2016/07/27 Javascript
JavaScript函数基础详解
2017/02/03 Javascript
js 转义字符及URI编码详解
2017/02/28 Javascript
vue 项目常用加载器及配置详解
2018/01/22 Javascript
vue 自定义全局方法,在组件里面的使用介绍
2018/02/28 Javascript
实例讲解Vue.js中router传参
2018/04/22 Javascript
JS实现获取word文档内容并输出显示到html页面示例
2018/06/23 Javascript
Bootstrap开发中Tab标签页切换图表显示问题的解决方法
2018/07/13 Javascript
深入了解js原型模式
2019/05/30 Javascript
vue2路由方式--嵌套路由实现方法分析
2020/03/06 Javascript
python实现比较两段文本不同之处的方法
2015/05/30 Python
机器学习的框架偏向于Python的13个原因
2017/12/07 Python
python实现局域网内实时通信代码
2019/12/22 Python
利用django model save方法对未更改的字段依然进行了保存
2020/03/28 Python
Python QT组件库qtwidgets的使用
2020/11/02 Python
新西兰第一的行李箱网站:luggage.co.nz
2019/07/22 全球购物
成功的酒店创业计划书
2013/12/27 职场文书
大学军训感言
2014/01/10 职场文书
数控个人求职信范文
2014/02/03 职场文书
竞选部门副经理的自荐书范文
2014/02/11 职场文书
小摄影师教学反思
2014/04/27 职场文书
激励员工的口号
2014/06/16 职场文书
学校党的群众路线教育实践活动总结报告
2014/07/03 职场文书
早上好问候语大全
2015/11/10 职场文书
解决Mysql多行子查询的使用及空值问题
2022/01/22 MySQL
mysql全面解析json/数组
2022/07/07 MySQL
Oracle中日期的使用方法实例
2022/07/07 Oracle
Win10玩csgo闪退如何解决?Win10玩csgo闪退的解决方法
2022/07/23 数码科技