ios UINavigationController自定义导航栏 自定义导航栏最新版

文章目录

• 一. 微信自带的导航栏
• 二.自定义导航栏

• 1.设置custom
• 2.component
• 3.引用组件

• 三.参考资料

一. 微信自带的导航栏

小程序有自带的导航栏，可以通过app.json中的

window进行配置，在此为全局的顶部导航。

二.自定义导航栏

1.设置custom

若需要自定义导航栏，即实现不同页面有不同标题，或者不同的顶部导航栏样式，则首先需要在app.json中的window添加"navigationStyle": "custom"。

也可以把其他的navigationBar字段给删除，直接加custom。

2.component

接着可以通过自定义组件components来自定义。
在小程序的根目录(即与app.json文件夹同在的那个文件夹）创建components文件夹。之后创建组件的名称文件夹（在我这里用的是nav）。
鼠标右键点击nav，点击创建component，即可以生成以下四个文件。（这四个文件用于写组件的样式等

nav.json

{
  "component": true,
  "usingComponents": {}
}

nav.js

// components/nav/nav.js
Component({
  properties: {
    title: {			// 设置标题
      type: String,
      value: ''	
    },
    cover_state: {	 // 控制页面padding-top
      type: Boolean,
      value: false
    },
    show_bol: {			// 控制返回箭头是否显示
      type: Boolean,
      value: true
    },
    my_class: {			// 控制样式
      type: Boolean,
      value: false
    }
  },
  /* 组件的初始数据 */
  data: {
    type: "组件",
    bar_Height: wx.getSystemInfoSync().statusBarHeight
    		// 获取手机状态栏高度
  },
  /* 组件的方法列表 */
  methods: {
    goBack: function () {					// 返回事件
      console.log("退后")
      wx.navigateBack({
        delta: 1,
      })
     
    }
  }

})

nav.html

<!--components/nav/nav.wxml-->
<view style="padding-top:{{cover_state ? bar_Height + 44 : 0}}px;">
 <view class='status-bar'>
    <view class='goBack' bindtap='goBack' style="padding-top:{{bar_Height}}px;"  hidden='{{show_bol}}'>	
      <!-- <image src='../../img/white-zuo.png'></image> -->
    </view>
    <view class="tabar {{my_class ? 'tabar2':''}}" style="padding-top:{{bar_Height}}px;">
      <text class="red">{{title}}</text>	
    </view>
  </view>
</view>

/* components/nav/nav.wxss */
/* 顶部导航 */
.status-bar {
  width: 100%;
  z-index: 99999;
  position: fixed;
  top: 0;
  
}
.goBack{
  position: absolute;
  top: 15rpx;
  font-size:12pt;
}
.goBack image{
  width: 40rpx;
  height: 40rpx;
  padding: 12rpx 20px 0 30rpx;
}
.tabar {
  display: flex;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0); 

}

.tabar2{
  background: transparent !important;
}
.tabar2 text{
  color: #fff !important;
  font-weight: lighter !important;
}
.tabar text {
  height: 44px;
  line-height: 44px;
  padding: 0 30rpx;
  color: white;
  font-size: 12pt;
  font-weight: bold;
}
.tabar .active {
  color: #fff;
}

3.引用组件

写好组件的四个文件之后，就是引用阶段。

在需要使用自定义导航栏的页面**.json加入组件路径，注意这里的路径要根据你自己的实际情况**去写。

"usingComponents": {
  "component":"../../components/nav/nav"
  }

• 若想要获取状态栏的高度作为component外面的盒子的padding-top，

statusBarHeight	状态栏的高度
screenHeight	屏幕高度

可以在页面.js中用wx.getSystemInfoSync().statusBarHeight 获取。

data:{
 bar_Height: wx.getSystemInfoSync().statusBarHeight
 widnowH : wx.getSystemInfoSync().screenHeight,
 }

在页面.wxml写入：

<view class='box-detail' style="padding-top:{{widnowH <=568 ?bar_Height + 40:bar_Height + 45}}px;">			
  <component title='首页' show_bol='{{false}}'></component>
</view>

这样的话，就有一个自适应手机型号高度的导航栏。

如此一来，便可以通过修改nav.wxml来修改导航栏上的东西了。

• 也可以不获取状态栏高度。这样的话，下面的元素就会直接往上移，就可以实现这种效果