微信小程序自定义导航栏(兼容适配所有机型)

阅读：评论：0

直接上代码，直接可以用

app.js（APP□）和app.wxss空白

app.josn

{"pages": ["pages/page/page"],"window": {"navigationStyle": "custom"},"style": "v2","sitemapLocation": "sitemap.json"
}

新建一个page。

page.js

Page({//页面的初始数据data: {//导航数组,这里只定义了一个navigationArr: [{title: '自定义导航栏'}]},//自定义导航上内边距自适应attached: function attached() {var _this = this;var isSupport = !!wx.getMenuButtonBoundingClientRect;var rect = wx.getMenuButtonBoundingClientRect ? wx.getMenuButtonBoundingClientRect() : SystemInfo({success: function success(res) {var ios = !!(LowerCase().search('ios') + 1);_this.setData({ios: ios,statusBarHeight: res.statusBarHeight,innerPaddingLeft: isSupport ? 'padding-left:' + (res.windowWidth - rect.left) + 'px' : '',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() {//此处为设置返回键，这里没有码上},/*** 生命周期函数--监听页面加载*/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})},
})

page.json

{"usingComponents": {}
}

page.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'}}" style="padding-top: {{statusBarHeight}}px;visibility: hidden;"></view><view class="weui-navigation-bar__inner {{ios ? 'ios' : 'android'}}" style="padding-top: {{statusBarHeight}}px; color: {{color}};background: {{background}};{{displayStyle}};{{innerPaddingRight}};{{innerWidth}};"><view class='weui-navigation-bar__center'><!-- 自定义导航标题 --><view class="navigation-title"><block wx:for="{{navigationArr}}" wx:for-index='index' wx: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="footer"></view>
</view>

page.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;z-index: 5001;height: var(--height);display: flex;align-items: center;padding-right: var(--right);width: calc(100% - var(--right));background-color: #006400
}/* 导航栏字体属性 */
.navigation-title {display: flex;color: #ffffff;justify-content: flex-start;align-items: center;width: 100%;height: 60rpx;line-height: 60rpx;padding: 20rpx;font-size: 24;    font-weight: bold;
}