微信小程序自定义导航栏(模板化)


Posted in Javascript onNovember 15, 2019

前段时间写过一篇关于微信小程序自定义导航栏的自定义组件,但是对于分享页有一定的bug
这次用模板化又搞了一遍 优化了下Android与IOS 显示更接近微信原生的导航栏,以及修复分享页面不显示返回首页按钮
如果大家不习惯模板化的话可以 针对自己的需求拿以前封装的组件化做一些修改
微信小程序自定义导航栏(组件化)

CustomNavBar.wxml

<template name="CustomNavBar">
 <block wx:if="{{ showNavBar }}">

 <!-- 自定义导航栏悬浮时,卡空行 -->
 <block wx:if="{{ needFixed }}">
  <view style="position: relative; width: 100%; height: {{ navHeight }}px;"></view>
 </block>

 <view class="custom-navbar-con relative {{ iOS ? ' ios ' : ' android ' }}" style="height: {{ navHeight }}px; {{ needFixed ? 'position: fixed; top: 0;' : '' }}">
  <view class="custom-navbar-statusbar-con relative" style="height: {{ statusBarHeight }}px;"></view>
  <view class="custom-navbar-content relative" style="height: {{ navHeight - statusBarHeight }}px;">

  <!-- iOS端的导航栏显示方式 -->
  <block wx:if="{{ navTitle && navTitle.length > 0 }}">
   <view class="custom-navbar-title ios">{{ navTitle }}</view>
  </block>

  <block wx:if="{{ showLeftMenu }}">
   <view class="custom-navbar-left-menu-con clearfix" style="top: {{ navRightMenuRect.top - statusBarHeight - 1 }}px; left: {{ winWidth - navRightMenuRect.right }}px; height: {{ navRightMenuRect.height + 2 }}px;">
   <block wx:if="{{ showBackBtn }}">
    <view class="custom-navbar-icon-btn pull-left back" style="height: {{ navRightMenuRect.height }}px" bindtap="customNavBarBack">
    <image class="icon" src="../../image/icon-nav-back.png" mode="aspectFit" style="width: {{ navRightMenuRect.height }}px;" />
    <text class="text"></text>
    </view>
   </block>

   <block wx:if="{{ showHomeBtn }}">
    <view class="custom-navbar-icon-btn pull-left home" style="height: {{ navRightMenuRect.height }}px" bindtap="customNavBarBackToHome">
    <image class="icon" src="../../image/icon-nav-home.png" mode="aspectFit" style="width: {{ navRightMenuRect.height }}px;" />
    <text class="text"></text>
    </view>
   </block>

   <!-- android端的导航栏显示方式 -->
   <block wx:if="{{ navTitle && navTitle.length > 0 }}">
    <view class="custom-navbar-title android pull-left" style="line-height: {{ navRightMenuRect.height - 2 }}px;">{{ navTitle }}</view>
   </block>
   </view>
  </block>
  </view>
 </view>
 </block>
</template>

CustomNavBar.wxss

.custom-navbar-con { position: relative; width: 100%; background-color: white; z-index: 9999; }
.custom-navbar-con .custom-navbar-statusbar-con { width: 100%; }
.custom-navbar-con .custom-navbar-content { width: 100%; }
.custom-navbar-con .custom-navbar-left-menu-con { position: absolute; }
.custom-navbar-con .custom-navbar-left-menu-con .custom-navbar-icon-btn { height: 100%; border-radius: 200px; border: 1px solid rgba(220, 220, 220, 0.6); }
.custom-navbar-con .custom-navbar-left-menu-con .custom-navbar-icon-btn .icon { height: 90%; margin-top: 2.5%; }
.custom-navbar-con .custom-navbar-left-menu-con .custom-navbar-icon-btn .text { font-size: 27rpx; }
.custom-navbar-con .custom-navbar-left-menu-con .custom-navbar-icon-btn.back { border: none; }
.custom-navbar-con .custom-navbar-left-menu-con .custom-navbar-icon-btn.back~.custom-navbar-icon-btn.home { margin-left: 10rpx; }
.custom-navbar-con .custom-navbar-left-menu-con .custom-navbar-icon-btn.switch-shop { padding-left: 5px; padding-right: 25rpx; }


.custom-navbar-con.ios .custom-navbar-title.android { display: none; }
.custom-navbar-con.android .custom-navbar-title.ios { display: none; }
.custom-navbar-con .custom-navbar-title.ios { font-weight: bold; text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); }
.custom-navbar-con .custom-navbar-title.android { padding-left: 30rpx; }```

CustomNavBar.js

```javascript
module.exports = function(PageInstance) {
 let App = getApp()

 let _tplData = {
 _CustomNavBar_: {
  navRightMenuRect: App.NavRightMenuRect,
  navRightMenuCenterY: App.NavRightMenuCenterY,
  statusBarHeight: App.StatusBarHeight,
  winWidth: App.WinWidth,
  winHeight: App.WinHeight,
  iOS: App.iOS,

  navTitle: '', // 当前只合适短标题,如需长标题,建议隐藏自定义导航栏,自定义展示
  navHeight: App.CustomNavHeight,

  needFixed: false,

  showNavBar: !App.NavRightMenuRect ? false : true,
  showLeftMenu: true,
  showBackBtn: true,
  showHomeBtn: false
 }
 }

 let _tplMethods = {
 customNavBarBack() {
  wx.navigateBack()
 },
 customNavBarBackToHome() {
  let url = '/pages/index/index'
  wx.reLaunch({
  url: url
  })
 }
 }
 let isIndexPage = !!(PageInstance.route == 'pages/index/index')
 let pages = getCurrentPages()
 if (pages.length == 1) {
 _tplData._CustomNavBar_.showBackBtn = false
 _tplData._CustomNavBar_.showHomeBtn = !isIndexPage
 }

 // 每个页面 可单独配置自定义导航栏
 if (PageInstance.data.CustomNavBarConfig) {
 Object.assign(_tplData._CustomNavBar_, PageInstance.data.CustomNavBarConfig)
 }

 // !!!! 最后执行
 // 当无法获取到右上角按钮胶囊的布局位置时,强制设置自定义导航栏为隐藏状态
 if (!App.NavRightMenuRect) {
 _tplData._CustomNavBar_.showNavBar = false
 }

 Object.assign(PageInstance, _tplMethods)
 PageInstance.setData(_tplData)
 return this
}

app.js的配置

// 自定义导航栏
import CustomNavBar from './template/CustomNavBar/CustomNavBar';

 App({
 //自定义 模板式 组件
 CustomNavBar,
 
 // 系统信息
  WinWidth: 0,
  WinHeight: 0,
  StatusBarHeight: 0,
  PixelRatio: 1,
  SystemFullName: '',
  SystemVersion: '',
  SystemSDKVersion: '',

  //自定义导航栏相关
  NavRightMenuRect: null,
  NavRightMenuCenterY: 0,
  CustomNavHeight: 0,
  
 onLaunch: function (options) {
 let self = this
 let systemInfo = wx.getSystemInfoSync()
 self.iOS = systemInfo.platform === 'ios'
 self.isDebug = systemInfo.platform === 'devtools'
 if (self.isDebug) {
  // 单纯为了在开发工具下调试 自定义导航栏
  // 开发工具下不存在App版本号的区分
  systemInfo.version = '7.0.0'
 }
 self.WinWidth = systemInfo.windowWidth
 self.WinHeight = systemInfo.windowHeight
 self.StatusBarHeight = systemInfo.statusBarHeight
 // 部分小程序库版本没有返回状态栏高度
 if (!self.StatusBarHeight) {
  self.StatusBarHeight = 20
 }
 self.PixelRatio = Math.max(systemInfo.pixelRatio, 2)
 self.SystemFullName = systemInfo.system
 self.SystemVersion = systemInfo.version
 self.SystemSDKVersion = systemInfo.SDKVersion

 // app.json全局配置的自定义导航栏的话,客户端需求版本为6.6.0
 // 每个页面 单独配置的自定义导航栏的话,客户端需求版本为7.0.0
 // wx.getMenuButtonBoundingClientRect方法,要求基础库版本为2.1.0
 if (self.compareVersion(self.SystemVersion, '6.6.0') >= 0) {
  // 官方的6.6.0版本以上客户端,最低基础库版本为1.9.4
  // 6.6.0以上且[1.9.4 - 2.1.0]范围内的机型无法使用wx.getMenuButtonBoundingClientRect
  // 所以手动写死非全面屏手机的适配胶囊布局位置
  self.NavRightMenuRect = {
  top: 26,
  bottom: 58,
  right: self.WinWidth - 10,
  width: 87,
  height: 32
  }
  // 如果系统信息返回的状态栏高度大于20,认为是全面屏手机
  if (self.StatusBarHeight > 20) {
  self.NavRightMenuRect.top = 50
  self.NavRightMenuRect.bottom = 82
  }

  // 2019年08月21日22:09:22
  // 微信小程序库出现bug,导致部分机型wx.getMenuButtonBoundingClientRect无返回值
  // 所以在这之前先默认写死一个NavRightMenuRect,防止全局的自定义导航栏已经隐藏了但是无法显示自定义导航栏
  // 详见https://developers.weixin.qq.com/community/develop/doc/00062238d78e880aedd88b72351c00
  if (wx.getMenuButtonBoundingClientRect) {
  let NavRightMenuRect = wx.getMenuButtonBoundingClientRect()
  self.NavRightMenuRect = {
   top: NavRightMenuRect.top,
   bottom: NavRightMenuRect.bottom,
   right: NavRightMenuRect.right,
   width: NavRightMenuRect.width,
   height: NavRightMenuRect.height
  }
  }

  self.NavRightMenuCenterY = self.NavRightMenuRect.top + self.NavRightMenuRect.height / 2
  self.CustomNavHeight = self.NavRightMenuRect.bottom + (self.NavRightMenuRect.top - self.StatusBarHeight)
 } else {
  self.NavRightMenuRect = null
  self.CustomNavHeight = 0
 }
 },
 
  // 比较两个版本号
 compareVersion (v1, v2) => {
   v1 = v1.split('.')
   v2 = v2.split('.')
   const len = Math.max(v1.length, v2.length)
 
   while (v1.length < len) {
     v1.push('0')
   }
   while (v2.length < len) {
     v2.push('0')
   }
 
   for (let i = 0; i < len; i++) {
     const num1 = parseInt(v1[i])
     const num2 = parseInt(v2[i])
 
     if (num1 > num2) {
       return 1
     } else if (num1 < num2) {
       return -1
     }
   }
   return 0
 } 
    
}),

假如在index 页面引用

index.wxml

<!-- 自定义NavBar -->
<import src="../../template/CustomNavBar/CustomNavBar.wxml" />
<template is="CustomNavBar" data="{{ ..._CustomNavBar_ }}"></template>

index.js

onLoad: function(options) {
  new App.CustomNavBar(this)
 }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript闭包用法实例分析
Jan 23 Javascript
javascript中attachEvent用法实例分析
May 14 Javascript
checkbox 选中一个另一个checkbox也会选中的实现代码
Jul 09 Javascript
EasyUI加载完Html内容样式渲染完成后显示
Jul 25 Javascript
jquery实现input框获取焦点的简单实例
Jan 26 Javascript
AngularJS获取json数据的方法详解
May 27 Javascript
基于jQuery Easyui实现登陆框界面
Jul 10 jQuery
JS禁止浏览器右键查看元素或按F12审查元素自动关闭页面示例代码
Sep 07 Javascript
基于vue-cli创建的项目的目录结构及说明介绍
Nov 23 Javascript
浅析JavaScript中的特殊数据类型
Dec 15 Javascript
vue判断input输入内容全是空格的方法
Mar 02 Javascript
关于js的三种使用方式(行内js、内部js、外部js)的程序代码
May 05 Javascript
在node环境下parse Smarty模板的使用示例代码
Nov 15 #Javascript
微信小程序自定义头部导航栏(组件化)
Nov 15 #Javascript
create-react-app中添加less支持的实现
Nov 15 #Javascript
taro小程序添加骨架屏的实现代码
Nov 15 #Javascript
详解Angular Karma测试的持续集成实践
Nov 15 #Javascript
Javascript 类型转换、封闭函数及常见内置对象操作示例
Nov 15 #Javascript
JavaScript定时器常见用法实例分析
Nov 15 #Javascript
You might like
PHP XML数据解析代码
2010/05/26 PHP
php数组中删除元素的实现代码
2012/06/22 PHP
php读取EXCEL文件 php excelreader读取excel文件
2012/12/06 PHP
php基于base64解码图片与加密图片还原实例
2014/11/03 PHP
Symfony2学习笔记之系统路由详解
2016/03/17 PHP
PHP数组实例详解
2016/06/26 PHP
php和html的区别点详细总结
2019/09/24 PHP
JavaScript 自动完成脚本整理(33个)
2009/10/20 Javascript
javascript删除字符串最后一个字符
2014/01/14 Javascript
JS遍历Json字符串中键值对先转成JSON对象再遍历
2014/08/15 Javascript
IE6兼容透明背景图片及解决方案
2015/08/19 Javascript
JS截取与分割字符串常用技巧总结
2015/11/10 Javascript
Node.js中流(stream)的使用方法示例
2017/07/16 Javascript
VueJs单页应用实现微信网页授权及微信分享功能示例
2017/07/26 Javascript
vue-router 导航钩子的具体使用方法
2017/08/31 Javascript
10分钟上手vue-cli 3.0 入门介绍
2018/04/04 Javascript
微信小程序页面间传值与页面取值操作实例分析
2019/04/30 Javascript
vue.js实现二级菜单效果
2019/10/19 Javascript
在vue中实现禁止屏幕滚动,禁止屏幕滑动
2020/07/22 Javascript
[01:00:14]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs TNC 第三场
2018/04/10 DOTA
Python实用技巧之利用元组代替字典并为元组元素命名
2018/07/11 Python
python怎么判断素数
2020/07/01 Python
PyChon中关于Jekins的详细安装(推荐)
2020/12/28 Python
纯CSS3制作漂亮带动画效果的主机价格表
2015/04/25 HTML / CSS
详解CSS3选择器的使用方法汇总
2015/11/24 HTML / CSS
MAC彩妆英国官网:M·A·C UK
2018/05/30 全球购物
Europcar澳大利亚官网:全球汽车租赁领域的领导者
2019/03/24 全球购物
德国的大型美妆个护电商:Flaconi
2020/06/26 全球购物
党员公开承诺书2015
2015/01/21 职场文书
本科毕业论文致谢词
2015/05/14 职场文书
预备党员介绍人意见
2015/06/01 职场文书
总结一些Java常用的加密算法
2021/06/11 Java/Android
CSS中Single Div 绘图技巧的实现
2021/06/18 HTML / CSS
Python机器学习之决策树和随机森林
2021/07/15 Javascript
《王者天下》第4季首话新剧照 4月9日正式开播
2022/04/07 日漫
Win11安全功能升级:内置防网络钓鱼功能
2022/04/08 数码科技