微信小程序之导航栏样式修改、自定义导航栏及封装_微信小程序状态栏

 

在微信小程序中我们会经常看到不同字样的顶部标题，这样的样式有的是一样的，而有的却又是不同的导航栏，这是怎么回事呢，在这里我们就探讨一下。(微信小程序json文件不能有注释，复制过去的时候有注释记得自行删除，希望能帮到大家，喜欢的给个赞，感谢)

一、使用微信小程序的默认导航栏

1、在app.json中进行如下配置则能够实现全局的顶栏

"window":{
  "navigationBarBackgroundColor": "#333",//设置顶栏背景颜色
  "navigationBarTextStyle": "black",//导航栏标题颜色，仅支持 black / white
  "navigationBarTitleText": "首页测试",//设置顶栏文字
  "backgroundColor": "#eeeeee",//窗口的背景色
  "backgroundTextStyle": "light",//下拉 loading 的样式，仅支持 dark / light
}

 2、而如果想要子页面的顶栏文字不同，则在相应的json文件里添加

{
    "navigationBarTitleText": "光与影"
}

结果截图:

二、使用自定义的导航栏

1、首先需要把默认的导航栏隐藏起来，在app.json文件中设置

"window":{
  "navigationStyle": "custom"
},

2、需要app.js里全局设置获取不同手机的状态栏，注意要先定义一个全局变量navHeight，这样就能把获取到的状态栏高度变成一个全局变量。

//app.js
App({
  onLaunch: function () {
    wx.getSystemInfo({
      success: res => {
        //导航高度
        this.globalData.navHeight = res.statusBarHeight + 46;
      }, fail(err) {
        console.log(err);
      }
    })
  },
  globalData: {
    userInfo: null,
    navHeight: 0
  }
})

3、在子页面中拿会拿到全局变量navHeight

const App = getApp();
Page({
  onLoad: function (options) {
    this.setData({
      navH: App.globalData.navHeight
    })
  },
})

4、把拿到的数据显示

<view>
  <view class='nav bg-white' style='height:{{navH}}px'>
    <view class='nav-title'>
      首页
      <image src='../../img/back.png' mode='aspectFit' class='back' bindtap='navBack'></image>
      <image src='../../img/home.png' mode='aspectFit' class='back1' bindtap='navBack'></image>
    </view>
  </view>
  <scroll-view class='bg-gray overflow' style='height:calc(100vh - {{navH}}px)' scroll-y>
    <view class='hidden'>
      我是首页
    </view>
  </scroll-view>
</view>

结果截图：

三、把自定义导航栏封装成组件

       之前只是简单的实现自定义导航栏，要自定义导航栏，那么一般都会有很多地方用到，每个地方都复制就不是很友好，最好是能够把它封装成一个组件。

1、目录结构如下：

2、把之前的页面照搬过来

<!-- navBar-wxml -->
<view>
  <view class='nav bg-white' style='height:{{navH}}px'>
    <view class='nav-title'>
      首页
      <view  wx:if="{{navData.show}}" >
      <image src='../../img/back.png' mode='aspectFit' class='back' bindtap='navBack'></image> 
      <image src='../../img/home.png' mode='aspectFit' class='back1' bindtap='navBack'></image> 
      </view>
    </view>
  </view>
</view>

3、Js文件需要做一下修改，之前首页也有返回图标，现在把图标隐藏，去到子页面的时候再显示

const app = getApp();
Component({
  properties: {//类似于vue的props用来进行父子组件之间的传值
    navData:{ //自定义属性用于服级组件传值过来
      type: Object,
      value: ['']
    }
  },
 
  data: {
    navH: app.globalData.navHeight //把从全局拿到的手机状态栏高度赋值给页面自定义的高度
  },
  methods: {
 
  }
})

4、主要把子页面的引用展示一下，首页更简单，也是一样，所以就不赘述首页代码了

（1）在json文件引入组件

{
    "usingComponents": {
        "navBar": "../../components/navBar"
    }
}

（2）在js文件，定义需要传到子组件的数据

//logs.js
Page({
  data: {
    navData: {//传给子组件的数据，用来控制图标的显示
      show:true
    }
  },
})

（3）页面显示

<view>
  <navBar navData="{{navData}}" />
  <scroll-view class='bg-gray overflow' style='height:calc(100vh - {{navH}}px)' scroll-y>
    <view class='hidden'>
      我是子页面
    </view>
  </scroll-view>
</view>

结果截图：