⼩程序⾃定义navigation-bar导航栏（⾃适应安卓苹果）
最近在写商城，中途遇到了需要⾃定义修改导航栏的操作，⼤概是如下图接过样⼦的，于是想⼿写⼀份，但我发现右上⾓的分享按钮在不同设备离顶部的距离是不⼀样的，于是了下官⽅划⽔员写的⽂档()，(⊙o⊙)…貌似不能满⾜这需求，⽽且后续也要实现点击导航滚动定位()，组件传参⿇烦，⽽且还未必能实现，于是我把WeUI的navigation-bar组件的精华提取出来写了⼀份。顺带录了个GIF，在不同设备都是可以与分享按钮保持同⼀⽔平⾼度的。
json：
加上"navigationStyle": "custom"把原有导航去掉
{
"usingComponents":{},
"navigationStyle":"custom"
}
wxml：
<view class="body">
<view class="header">
<!-- 官⽅⾃定义导航栏抽取出来的模块 -->
<view class="navigation">
<view class="weui-navigation-bar {{extClass}}">
<view class="weui-navigation-bar__placeholder {{ios ? 'ios' : 'android'}}"></view>
<view class="weui-navigation-bar__inner {{ios ? 'ios' : 'android'}}">
<!-- 左边的返回按钮图标，根据需求删除，记得把多余的css和js也删了 -->
<view class='weui-navigation-bar__left'bindtap="back">
<view class="weui-navigation-bar__buttons">
<view class="weui-navigation-bar__button weui-navigation-bar__btn_goback"></view>
</view>
</view>
<view class='weui-navigation-bar__center'>
<!-- ⾃定义导航标题 -->
<view class="navigation-title">
<!-- 从这⾥开始就是写⾃⼰的代码了 -->
<block for="{{navigationArr}}"for-index='index'key='index'>
<view bindtap="cutTitle"data-index="{{index}}"class="{{item.isSelected ? 'selected-title':''}}">
<text>{{item.title}}</text>
</view>
</block>
</view>
</view>
</view>
</view>
</view>
</view>
<view class="main">
<!-- 轮播图，将就⽤图⽚代替先 -->
<view class="slideshow">
<image src="m.qpic/psc?/V14ZaBeY27gVgy/zkoezU7GGNbZGOF.DPhgQWdZDQSn8Jd6cveuxVrM5i8l2kSZLs4oxthN912G3PseAlKnSZdOiP2rg 1tsok8XenrbNBnnQSYJo190MRLXjI4!/b&bo=4wKbAuMCmwIRGS4!&rf=viewer_4"></image>
</view>
</view>
<view class="footer"></view>
</view>
wxss：
.navigation{
--height: 44px;
--right: 190rpx
}
.weui-navigation-bar{
overflow: hidden
}
.weui-navigation-bar .android{
-
-height: 48px;
--right: 222rpx
}
.weui-navigation-bar__inner{
position: fixed;
top: 0;
left: 0;
js导航栏下拉菜单z-index: 5001;
height:var(--height);
display: flex;
align-items: center;
padding-right:var(--right);
padding-right:var(--right);
width:calc(100% - var(--right));
background-color:rgba(255, 255, 255, 0.4)
}
.weui-navigation-bar__inner .weui-navigation-bar__left{
position: relative;
width:var(--right);
padding-left: 16px;
display: -webkit-box;
display: -webkit-flex;
display: flex;
align-items: center;
-webkit-box-pack: center
}
.weui-navigation-bar__inner .weui-navigation-bar__left .weui-navigation-bar__btn{
display: inline-block;
vertical-align: middle;
background-repeat: no-repeat
}
.weui-navigation-bar__inner .weui-navigation-bar__left .weui-navigation-bar__btn_goback{
font-size: 12px;
width: 1em;
height: 2em;
background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='/2000/svg' width='12' height='24' viewBox='0 0 12 24'%3E % 3Cpath fill-opacity='.9' fill-rule='evenodd' d='M10 19.438L8.955 20.5l-7.666-7.79a1.02 1.02 0 0 1 0-1.42L8.955 3.5 10 4.563 2.682 12 10 19.438z'/%3E%3 C/svg%3E");
background-position: 50% 50%;
background-size: cover
}
.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
}
.weui-navigation-bar__placeholder{
height:var(--height);
background: #F8F8F8;
position: relative;
z-index: 50
}
/* 上⾯的是WeUI的代码 */
Page{
background-color: #f1f1f1;
}
.header{
position: absolute;
}
}
.navigation-title{
display: flex;
justify-content: space-around; align-items: center;
width: 100%;
height: 60rpx;
line-height: 60rpx;
}
.navigation-title text{
font-size: 28rpx;
}
.navigation-title .selected-title{ color: red;
position: relative;
}
.navigation-title .selected-title::before{ content:'';
position: absolute;
bottom: -10rpx;
left: 50%;
margin-left: -25rpx;
width: 50rpx;
height: 4rpx;
background-color: red;
}
.slideshow image{
width: 100%;
height: 600rpx;
}
js：
Page({
/
**
* 页⾯的初始数据
*/
data:{
//导航数组
navigationArr:[{
title:'商品',
isSelected:true
},
{
title:'评价',
isSelected:false
},
{
title:'详细',
isSelected:false
},
{
title:'推荐',
isSelected:false
}
]
},
//⾃定义导航上内边距⾃适应attached:function attached(){
attached:function attached(){
var _this =this;
var isSupport =!!wx.getMenuButtonBoundingClientRect;
var rect = wx.getMenuButtonBoundingClientRect ? wx.getMenuButtonBoundingClientRect():null;
success:function success(res){
var ios =!!(LowerCase().search('ios')+1);
_this.setData({
ios: ios,
statusBarHeight: res.statusBarHeight,
innerWidth: isSupport ?'width:'+ rect.left +'px':'',
innerPaddingRight: isSupport ?'padding-right:'+(res.windowWidth - rect.left)+'px':'',
leftWidth: isSupport ?'width:'+(res.windowWidth - rect.left)+'px':''
});
}
});
},
//⾃定义导航返回图标操作
back:function back(){
wx.navigateBack({
delta:1
}).then(res =>{
// console.log(res)
}).catch(err =>{
// 如果报错，说明是通过⼆维码或者分享进⼊的，直接返回⾸页
url:'../index/index',
})
})
},
/**
* ⽣命周期函数--监听页⾯加载
*/
onLoad:function(options){
var _this =this;
//初始化页⾯⾃定义导航栏
_this.attached();
},
//切换导航
cutTitle:function(e){
// console.log(e.currentTarget.dataset.index)
let that =this;
let index = e.currentTarget.dataset.index;
var navigationArr = that.data.navigationArr;
//清空全部样式
navigationArr.forEach((item)=>{
item.isSelected =false;
})
//点击的导航添加上样式
navigationArr[index].isSelected =true;
that.setData({
navigationArr:navigationArr
})
},
})
❀改⼀：
如果你想让通知栏的颜⾊换成⽩⾊，在json⽂件中加⼊"navigationBarTextStyle": "white"就可以了，另外返回按钮的话⾃⼰换张⽩⾊的图标就好了，没有图标的⼩伙伴可以去下载，直接搜索“返回”就很多了，⾃⼰调⼀下颜⾊就好。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论