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

直接上代码，直接可以用

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() : null;
    wx.getSystemInfo({
      success: function success(res) {
        var ios = !!(res.system.toLowerCase().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;
}

总结

本文简化自定义navigationBar的一些基础性东西，里面涉及组件用法、参数传递、导航栏相关。
由于本人刚学小程序，大家在使用时如果发现有什么问题，希望及时反馈！
感觉有些地方还是比较臃肿，大家有什么建议，欢迎评论区留言！
参考：https://blog.csdn.net/x37558670/article/details/116524026?spm=1001.2014.3001.5501