前言

导航栏是指位于页面顶部或者侧边区域的，在页眉横幅图片上边或下边的一排水平导航按钮，它起着链接站点或者软件内的各个页面的作用。

小程序原生导航栏的限制

除了胶囊按钮以外，原生导航栏只会出现返回按钮和当用户打开的小程序最底层页面是非首页时，默认展示的“返回首页”按钮。
原生导航栏的标题文字的颜色只有黑白。
布局无法改变，不能做定制。

在做自定义导航栏栏之前得去掉原生导航栏，去掉方法如下：

将需要自定义navigationBar页面的page.json的navigationBarTitleText去掉。
加上"navigationStyle"：“custom”，这样原生的导航栏就已经消失，甚至后退键也不会出现需要自定义。

一、自定义导航栏功能的实现

1.组件的封装

"use strict";
var app = getApp();Component({options: {// 多插槽支持multipleSlots: true// ,addGlobalClass: true},
properties: {'ext-class': {type: String,value: ''},loading: {type: Boolean,value: false},active: {type: Boolean,value: false// ,observer: '_showChange'}  },data: {},
attached: function attached() {// 组件被加载时，计算ios、android两个平台的尺寸差异var _this = this;        //动态计算导航栏尺寸var isSupport = !!wx.getMenuButtonBoundingClientRect;var rect = wx.getMenuButtonBoundingClientRect ? wx.getMenuButtonBoundingClientRect() : null;wx.getSystemInfo({success: function success(res) {var ios = !!(res.system.toLowerCase().search('ios') + 1);var statusBarHeight=res.statusBarHeight;var topBarHeight=ios ? (44 + statusBarHeight) : (48 + statusBarHeight);_this.setData({ios: ios,topBarHeight:topBarHeight,statusBarHeight:statusBarHeight,innerWidth: isSupport ? 'width:' + rect.left + 'px' : '',innerPaddingRight: isSupport ? 'padding-right:' + (res.windowWidth - rect.left) + 'px' : '',leftWidth: isSupport ? 'width:' + (res.windowWidth - rect.left) + 'px' : ''}); // 这是为了在外面注入wxss变量，这个设计并不太好// _this.triggerEvent('getBarInfo', {topBarHeight,statusBarHeight});}});//back箭头处理的显示var pages=getCurrentPages()      if(pages.length>1){this.setData({showBack:true})}},methods: {// _showChange: function _showChange(active) {//   var displayStyle = 'opacity: ' + (active ? '1' : '0') + ';-webkit-transition:opacity 0.5s;transition:opacity 0.5s;';//   this.setData({//       displayStyle: displayStyle//   });// },//双击返回顶部doubleClick(e) {if (this.timeStamp && (e.timeStamp - this.timeStamp < 300)) {this.timeStamp = 0wx.pageScrollTo({scrollTop: 0,duration: 300})} else {this.timeStamp = e.timeStamp}}}
});

{"styleIsolation": "apply-shared","component": true,"usingComponents": {}
}

<view class="weui-navigation-bar {{ext-class}}" bindtouchstart="doubleClick"><!-- 标题栏 -->
<view class="{{active ? 'navigator-active' : 'navigator-normal'}} weui-navigation-bar__inner {{ios ? 'ios' : 'android'}}" style="padding-top: {{statusBarHeight}}px;{{innerPaddingRight}};{{innerWidth}};"><view class='weui-navigation-bar__left' style="{{leftWidth}}"><slot name="left"></slot></view><view class='weui-navigation-bar__center'><view wx:if="{{loading}}" class="weui-navigation-bar__loading"></view><block wx:if="{{active}}"><slot name="center"></slot></block></view></view>
</view>

/* 微信小程序wxss中使用var变量 */
page {--height: 44px;--right: 190rpx;
}.weui-navigation-bar {overflow: hidden
}
/*
ios、android两个平台导航栏的高度不一样
ios 44px
android 48px*/
.weui-navigation-bar .android {--height: 48px;--right: 222rpx
}.weui-navigation-bar__placeholder {height: var(--height);background: #F8F8F8;position: relative;z-index: 50
}.weui-navigation-bar__inner {position: fixed;top: 0;left: 0;z-index: 5001;height: var(--height);display: flex;align-items: center;padding-right: var(--right);width: calc(100% - var(--right))
}.weui-navigation-bar__inner.navigation-bar-border {/* border-bottom: 2rpx solid #ddd; */
}.weui-navigation-bar__inner .weui-navigation-bar__left {position: relative;width: var(--right);padding-left: 15px;box-sizing: border-box;display: -webkit-box;display: -webkit-flex;display: flex;align-items: center;-webkit-box-pack: center;
}.weui-navigation-bar__inner .weui-navigation-bar__left .btn-back {width: 12px;height: 24px;
}.weui-navigation-bar__inner .weui-navigation-bar__left .btn-back image {width: 100%;height: 100%;
}.weui-navigation-bar__left .btn-home {width: 20px;height: 20px;
}.weui-navigation-bar__left .btn-back+.btn-home {margin-left: 50rpx;
}.weui-navigation-bar__left .btn-home image {width: 100%;height: 100%;
}.weui-navigation-bar__inner .weui-navigation-bar__left .weui-navigation-bar__btn_goback:active {opacity: .5
}.weui-navigation-bar__inner .weui-navigation-bar__center {font-size: 17px;text-align: center;position: relative;flex: 1;display: -webkit-box;display: -webkit-flex;display: flex;align-items: center;-webkit-box-pack: center;-webkit-justify-content: center;justify-content: center;overflow: hidden;
}.weui-navigation-bar__center text {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;margin-top: -2px;
}.weui-navigation-bar__inner .weui-navigation-bar__loading {width: 20px;height: 20px;margin-right: 5px;content: " ";animation: loading-animate 1s steps(12, end) infinite;background: transparent url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iciIgd2lkdGg9JzEyMHB4JyBoZWlnaHQ9JzEyMHB4JyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj4KICAgIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiBmaWxsPSJub25lIiBjbGFzcz0iYmsiPjwvcmVjdD4KICAgIDxyZWN0IHg9JzQ2LjUnIHk9JzQwJyB3aWR0aD0nNycgaGVpZ2h0PScyMCcgcng9JzUnIHJ5PSc1JyBmaWxsPScjRTlFOUU5JwogICAgICAgICAgdHJhbnNmb3JtPSdyb3RhdGUoMCA1MCA1MCkgdHJhbnNsYXRlKDAgLTMwKSc+CiAgICA8L3JlY3Q+CiAgICA8cmVjdCB4PSc0Ni41JyB5PSc0MCcgd2lkdGg9JzcnIGhlaWdodD0nMjAnIHJ4PSc1JyByeT0nNScgZmlsbD0nIzk4OTY5NycKICAgICAgICAgIHRyYW5zZm9ybT0ncm90YXRlKDMwIDUwIDUwKSB0cmFuc2xhdGUoMCAtMzApJz4KICAgICAgICAgICAgICAgICByZXBlYXRDb3VudD0naW5kZWZpbml0ZScvPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyM5Qjk5OUEnCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSg2MCA1MCA1MCkgdHJhbnNsYXRlKDAgLTMwKSc+CiAgICAgICAgICAgICAgICAgcmVwZWF0Q291bnQ9J2luZGVmaW5pdGUnLz4KICAgIDwvcmVjdD4KICAgIDxyZWN0IHg9JzQ2LjUnIHk9JzQwJyB3aWR0aD0nNycgaGVpZ2h0PScyMCcgcng9JzUnIHJ5PSc1JyBmaWxsPScjQTNBMUEyJwogICAgICAgICAgdHJhbnNmb3JtPSdyb3RhdGUoOTAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNBQkE5QUEnCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgxMjAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNCMkIyQjInCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgxNTAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNCQUI4QjknCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgxODAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNDMkMwQzEnCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgyMTAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNDQkNCQ0InCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgyNDAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNEMkQyRDInCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgyNzAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNEQURBREEnCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgzMDAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0PgogICAgPHJlY3QgeD0nNDYuNScgeT0nNDAnIHdpZHRoPSc3JyBoZWlnaHQ9JzIwJyByeD0nNScgcnk9JzUnIGZpbGw9JyNFMkUyRTInCiAgICAgICAgICB0cmFuc2Zvcm09J3JvdGF0ZSgzMzAgNTAgNTApIHRyYW5zbGF0ZSgwIC0zMCknPgogICAgPC9yZWN0Pgo8L3N2Zz4=) no-repeat;background-size: 100%;
}@keyframes loading-animate {0% {transform: rotate3d(0, 0, 1, 0deg);}100% {transform: rotate3d(0, 0, 1, 360deg);}
}/* 激活显示的状态, 非透明，有背景色 */
.navigator-active {-webkit-transition: opacity 0.5s;transition: opacity 0.5s;background: #FFF;color: #3c3c3c;
}.navigator-normal {-webkit-transition: opacity 0.5s;transition: opacity 0.5s;background: transparent;color: white;
}

2.使用

<navigation-bar ext-class="page-navigator-bar"active="{{active}}"loading="{{loading}}"><view class="left" slot="left"><icon bindtap="goBack" class="iconfont icon-back"></icon><icon bindtap="goHome" class="iconfont icon-home"></icon></view><view slot="center"><view>自定义导航标题</view></view>
</navigation-bar>

Page({data: {loading: false,active: true},//点击back事件处理goBack: function () {wx.navigateBack();this.triggerEvent('back');},//返回首页goHome:function(){wx.reLaunch({url: '/pages/index/index'})},
})

@font-face {font-family: 'iconfont';  /* project id 1716930 */src: url('//at.alicdn.com/t/font_1716930_0fs7vun2ngmn.eot');src: url('//at.alicdn.com/t/font_1716930_0fs7vun2ngmn.eot?#iefix') format('embedded-opentype'),url('//at.alicdn.com/t/font_1716930_0fs7vun2ngmn.woff2') format('woff2'),url('//at.alicdn.com/t/font_1716930_0fs7vun2ngmn.woff') format('woff'),url('//at.alicdn.com/t/font_1716930_0fs7vun2ngmn.ttf') format('truetype'),url('//at.alicdn.com/t/font_1716930_0fs7vun2ngmn.svg#iconfont') format('svg');
}
.iconfont{font-family: 'iconfont';
}
.icon-back::after{content: '\e604';font-size: 22px;
}
.icon-home::after{content: '\e6f3';font-size: 22px;
}
.left icon:last-child{padding-left: 20rpx;
}.page-navigator-bar .navigator-normal .icon-back{color: white;
}
.page-navigator-bar .navigator-normal .icon-home{color: white;
}
.page-navigator-bar .navigator-active .icon-back{color: black;
}
.page-navigator-bar .navigator-active .icon-home{color: black;
}

【愚公系列】2022年09月微信小程序-自定义导航栏功能的实现相关推荐

微信小程序自定义导航栏（带汉堡包菜单）
微信小程序自定义导航栏(带汉堡包菜单) 1.在app.json中 window配置navigationStyle (如果单独页面使用,可在页面的json文件配置) 2.计算相关值整个导航栏的高度: ...
微信小程序自定义导航栏 navigation bar 返回键首页
微信小程序自定义导航栏(wx_custom_navigation_bar) 自定义返回键.首页键,动态设置标题,响应式组件版本号:2.0.0 作者:chen-yt github: https://g ...
微信小程序自定义导航栏如何实现（简洁版）~内附代码
先来张效果图实现起来也是十分容易的,几行代码. Page({data: {},onLoad() {// 获取设备的信息let menuButtonObject = wx.getMenuButtonB ...
微信小程序-自定义导航栏
微信小程序-自定义导航栏第一步添加属性 "navigationStyle": "custom" 第二步自定义导航栏第二步自定义组件第四步使用组件 ...
微信小程序自定义导航栏组件
效果图首先要先在 json文件里加上 "navigationStyle":"custom", 这句,去掉原生的自定义导航栏一.子组件-wxml <vi ...
微信小程序自定义导航栏组件,完美适配所有手机,可实现各种功能和情况
背景在做小程序时,关于默认导航栏,我们遇到了以下的问题: Android.IOS手机对于页面title的展示不一致,安卓title的显示不居中页面的title只支持纯文本级别的样式控制,不能够做更 ...
微信小程序自定义导航栏机型适配--底部Tabbar--view高度--底部按钮适配
自定义微信小程序头部导航栏自定义微信小程序头部导航栏,有几种方式方式一 {"navigationStyle": "custom" // 将navigatio ...
微信小程序自定义导航栏返回和标题
1.新建组件 index.json {"component": true } navbar.wxss //navbar.wxss .navbar{width: 100%;//设置导 ...
微信小程序自定义导航栏组件(完美适配所有手机),可自定义实现任何你想要的功能
背景在做小程序时,关于默认导航栏,我们遇到了以下的问题: Android.IOS 手机对于页面 title 的展示不一致,安卓 title 的显示不居中页面的 title 只支持纯文本级别的样式控 ...

【愚公系列】2022年09月微信小程序-自定义导航栏功能的实现

文章目录

前言

一、自定义导航栏功能的实现

1.组件的封装

2.使用

【愚公系列】2022年09月微信小程序-自定义导航栏功能的实现相关推荐

最新文章

热门文章

【愚公系列】2022年09月 微信小程序-自定义导航栏功能的实现

文章目录

前言

一、自定义导航栏功能的实现

1.组件的封装

2.使用

【愚公系列】2022年09月 微信小程序-自定义导航栏功能的实现相关推荐

最新文章

热门文章

【愚公系列】2022年09月微信小程序-自定义导航栏功能的实现

【愚公系列】2022年09月微信小程序-自定义导航栏功能的实现相关推荐