小程序自定义标题栏————（2020.1.31学习笔记）

这次要实现的标题栏效果如下图

如图标题栏文字局左，而小程序默认标题栏文字是居中的，所以要实现这个效果必须使用自定义标题栏，那么，在使用自定义标题栏之前，我们必须在app.json进行配置，将原有的默认标题栏停用，转为使用自定义标题栏（配置代码如下）

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

在停用默认标题栏之后，原先标题栏的位置就只剩下了一个胶囊状的组件（如下图）

如图，标题栏消失之后，页面的组件都挤在了屏幕边缘了，这实在不太好看，至少我们需要腾出空间，显示我们手机的电量和时间，但因为这个高度因手机而异，有些手机的高度高点，有些可能低点，所以必须使用动态的方式获取电量所占高度，然后其他页面也要空出相同的高度。所以获取的高度必须装载到一个全局变量中，以此方便其他页面调用，这里的代码如下

//app.js
App({
  onLaunch: function () {

  },
  globalData: {
    TitleBar_Height:wx.getSystemInfoSync()['statusBarHeight'],

  }
})

介于全局变量是无法直接在wxml中使用，所以必须在使用页面中定义一个变量来装载全局变量，以此通过这个定义的变量间接调用全局变量（代码如下）

const app=getApp()
Page({

  /**
   * 页面的初始数据
   */
  data: {
    
    TitleBar_Height:app.globalData.TitleBar_Height
  },

然后，在wxml中，根据自己需求，写出自己的标题栏，并在自己标题栏中，设置style=“padding-top:{{TitleBar_Height}}rpx”，如果自己想空出多点空间，还可以在高度变量上再加点高度，比如style=“padding-top:{{TitleBar_Height+15}}rpx”，接下来，为了方便理解，标题栏代码贴上来吧（代码如下）
wxml的代码

<view class="TitleBar" style="padding-top:{{TitleBar_Height+15}}rpx">

   <text>天气预报</text>

 
</view>

wxss的代码

.TitleBar{
   width: 100%;
   display: flex;
   height: 100rpx;
   
  justify-content: flex-start ;
   align-items: center;
   
}
.TitleBar text{
 font-size: YouYuan;
 font-size: 35rpx;
 font-weight: 700;
 margin-left: 25rpx;
}

最后总体效果如下图