（转载）微信小程序自定义头部导航栏

本文转载自微信小程序自定义头部导航栏

微信小程序自定义头部导航栏

先看下demo的效果：

最终要实现的效果：

在tabbar页面不显示左侧按钮；
分享出去的页面进入后不显示左侧返回按钮；
点击返回按钮可以自行设置返回层级；
字体颜色，背景颜色的设置；
左侧按钮的深浅样式切换；

使用自定义组件定义导航栏

在小程序跟目录下建立component / nav文件夹用来放我们的导航栏组件

首先在app.js中获取机型信息

onLaunch() {wx.getSystemInfo({success: (res) => {this.globalData.windowWidth = res.windowWidththis.globalData.statusBarHeight = res.statusBarHeightthis.globalData.navBarHeight = 44 + res.statusBarHeight}})this.globalData.capsule = wx.getMenuButtonBoundingClientRect() //获取胶囊宽高及位置},globalData: {capsule:null,}

在nav组件中编写组件

wxml:

<view class="nav-box"><view wx:if="{{ seat }}" class="seat-box" style="height:{{ 44 + statusBarHeight}}px;"></view><view class='nav-wrap' style="background-color:{{backgroundColor}};"><view style="height:{{statusBarHeight}}px;"></view><view class='content'><view class="title" style="line-height:44px;color:{{titleColor}};">{{navTitle}}</view><view wx:if="{{isShow}}" class="capsule-box {{isWhite? 'isWhite':'isblack'}} {{!isBack?'noBack':''}}"style='height:{{capsule.height}}px;position: absolute; top:{{capsule.top-statusBarHeight}}px; left:{{left}}px;'><block wx:if="{{isBack}}"><view class="capsult-item"><image class='back' bindtap='back'src="{{isWhite ? '/images/ic_nav_back_white.png':'/images/ic_nav_back_blac.png'}}"mode="aspectFit" lazy-load="false" data-num="{{pageNum}}" binderror="" bindload=""></image></view><view class="{{isWhite? 'lineWhite':'lineblack'}}" hover-class="none" hover-stop-propagation="false"></view></block><view class="capsult-item"><image class='home' bindtap="toIndex"src="{{isWhite ? '/images/ic_nav_home_white.png':'/images/ic_nav_home_black.png'}}"mode="aspectFit" lazy-load="false" binderror="" bindload=""></image></view></view></view></view>
</view>

wxss


.nav-wrap {position: fixed;top: 0;left: 0;width: 750rpx;z-index: 99999;
}.content {position: relative;width: 100%;height: 44px;
}.back {width: 44rpx;height: 44rpx;
}.home {width: 44rpx;height: 44rpx;
}.lineblack {height: 36rpx;background: #B0B0B0;width: 1rpx;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);opacity: 0.5;
}.lineWhite {height: 36rpx;background: rgba(255, 255, 255, .7);width: 1rpx;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);opacity: 0.5;
}.title {text-align: center;font-weight: 900;font-size: 32rpx;
}.letBtnBox {width: 100px;display: flex;align-items: center;
}.capsule-box {width: 85px;border-radius: 88rpx;background: #FFFFFF;overflow: hidden;display: flex;justify-content: space-between;
}.isWhite {border: 1rpx solid rgba(255, 255, 255, .25);background: rgba(0, 0, 0, .15);
}.isblack {border: 1rpx solid rgba(0, 0, 0, .1);background: rgba(255, 255, 255, .6);
}.opacity {background: rgba(0, 0, 0, .1);
}.capsult-item {display: flex;width: 50%;align-items: center;justify-content: center;
}
.noBack{width: 32px;
}
.noBack .capsult-item{width: 100%;
}

// 是否显示左侧按钮isShow: {type: Boolean,value: true},// 是否显示左侧返回按钮isBack:{type:Boolean,value:true},// 返回层级 默认为1pageNum: {type: Number,value: 1}},data: {capsule: {}},lifetimes:{//判断是否有上一级页面，如果有显示返回按钮（isBack参数）否则不显示attached: function() {this.setData({isBack:getCurrentPages().length === 1?false:true})}},ready() {//获取机型状态栏信息const {statusBarHeight,navBarHeight} = app.globalDataconsole.log(app.globalData)this.setData({statusBarHeight,navBarHeight,left: app.globalData.windowWidth - app.globalData.capsule.right, //胶囊据右边距离capsule: app.globalData.capsule})},methods: {//返回层级 默认为1back(e) {wx.navigateBack({delta: e.currentTarget.dataset.num})},//跳转到首页toIndex() {wx.switchTab({url: '/pages/index/index'})}}
})

json

{"component": true
}

页面中引用

在需要使用自定义导航栏的页面设置

{"usingComponents": {"navbar":"/component/nav/nav"},"navigationStyle":"custom"
}

wxml中引入组件

<navbar isShow="{{isShow}}" navTitle="{{navTitle}}" backgroundColor="{{backgroundColor}}" isWhite="{{isWhite}}" pageNum="1" titleColor="{{titleColor}}"></navbar>

js文件配置

data:{isShow:true,//是否显示左侧按钮backgroundColor:'red',//背景颜色navTitle:'首页',//标题isWhite:true,//是否白色胶囊titleColor:'#fff',//字体颜色
}

images静态资源我项目中是使用的这四个图标。尺寸为44*44px; 如果你的项目中UI提供的图标尺寸不是这个，一定要对应去修改图标的nav.wxss中图片的尺寸大小！！！！

四个图标（可下载，添加了背景背景色方便看清正常加载没有背景颜色）：

图标预览图：

（转载）微信小程序自定义头部导航栏相关推荐

微信小程序 - 自定义头部导航栏组件（详解） + iphoneX以上遮挡小黑条适配问题
1. 导航栏计算: 导航栏总高度=状态栏高度+胶囊高度+(胶囊距顶距离-胶囊高度)*2 navHeight = statusBarHeight + menuButtonObject.height + ...
微信小程序自定义头部导航栏
1.微信自定义头部:app.json里面配置: "navigationStyle": "custom" 2.建立一个navigationBar的公共组件: A. ...
微信小程序自定义顶部导航栏标题 navigationStyle
微信小程序自定义顶部导航栏标题单页面自定义导航栏修改需要自定义的页面,的页面配置.json文件全部页面自定义导航修改公共页面配置app.json 单页面自定义导航栏修改需要自定义的页面,的 ...
uniapp开发微信小程序自定义顶部导航栏
自定义导航栏渐变色,先上效果使用uniapp开发小程序,在不同界面,要去对页面进行修改顶部导航栏. 比如说要去定义导航栏的背景颜色,常规的去定义导航栏背景颜色全局定义导航栏 "windo ...
原声微信小程序自定义顶部导航栏 . 自定义navigationBar。 (单页面设置)
本文实例为大家分享了微信小程序自定义导航栏的具体代码,供大家参考,具体内容如下实现自定义大致需要以下?步骤: 1.在页面.JSON文件进行相关配置,以便去掉原生 "navigationSt ...
微信小程序自定义搜索导航栏
自定义微信小程序导航栏因为项目需要,要实现如京东小程序类似的搜索导航栏-下图所示搜索框在导航栏中.参考了官方API最终实现了该有的效果,顺便吧此次实现的思路和代码记录下来. 一.拆解分析按照正常的 ...
微信小程序自定义tabbar导航栏，中间凸出样式
这种样式的底部导航栏使用微信小程序的自定义tabBar:微信小程序官方说明 uni.app=>在 page.json 中的 tabBar 项指定 custom 字段为true: "t ...
小程序自定义头部导航栏(“navigationStyle“: “custom“)，自定义tabBar
一.自定义顶部导航 1.在某些时候,不想要自带的顶部导航栏,需要自己定义,这时可以将自定义的导航栏做成一个组件,然后做一下初始配置,在每个页面引用,初始化,即可得到一个自定义的顶部导航栏: 2.代码部 ...
微信小程序自定义navigation-bar导航栏(自适应安卓苹果)
最近在写商城,中途遇到了需要自定义修改导航栏的操作,大概是如下图接过样子的,于是想手写一份,但我发现右上角的分享按钮在不同设备离顶部的距离是不一样的,于是找了下官方划水员写的文档(点这里查看),(⊙o ...

（转载）微信小程序自定义头部导航栏

本文转载自微信小程序自定义头部导航栏

微信小程序自定义头部导航栏

四个图标（可下载，添加了背景背景色方便看清正常加载没有背景颜色）：

（转载）微信小程序自定义头部导航栏相关推荐

最新文章

热门文章