微信小程序-自定义标题栏_由于skyline页面的navigationstyle

微信小程序-自定义标题栏

       在我们开发小程序的过程中，随着开发水平不断增强，野心也日益增大，大到想吞并整个界面。小程序的导航栏都想动，还有王法吗，还有法律吗？

       不过话又说回来，微信确实有这么一个功能："navigationStyle": "custom"，江湖人称"自定义导航栏"，也就是说在json文件里加上这样一句代码，就可篡改权威，自定义标题。什么全面屏啊，杀马特标题啊，都是ojbk的。

比如像这样：（图中加上了返回的一个小按钮，即返回上一页面）

或者这样：

    由于图二只需添加"navigationStyle": "custom"即可，无需其他操作，所以接下来将展示的是图一的源码：

//app.json
 
{
  "pages": [
    "pages/index/index",
    "pages/logs/logs",
    "pages/test1/test1"
  ],
  "window": {
 
      "navigationBarTitleText": "标题",
      "backgroundTextStyle": "dark",
      "navigationBarTextStyle": "black",
      "navigationStyle": "custom",
      "navigationBarBackgroundColor": "#fff"
  },
  "sitemapLocation": "sitemap.json"
}

//app.js
 
App({
  onLaunch: function() {
    var that = this;
    wx.getSystemInfo({
      success(res) {
        that.globalData.statusBarHeight = res.statusBarHeight;
        console.log(res.statusBarHeight, 'statusBarHeight')
      }
    })
  }
})

//test1.wxml
 
<view style="height: {{statusBarHeight}}px;"></view>
 
<view style='margin-top:10rpx;margin-left:20rpx;' bindtap='goback'>
  <image src='../../images/back.png' style='height:65rpx; width:65rpx;'></image>
</view>
 
<image src="../../images/ironman.jpg" style="width:100%;height:1650rpx;" />

//test1.js
 
const app=getApp();
Page({
 
  /**
   * 页面的初始数据
   */
  data: {
    statusBarHeight: getApp().globalData.statusBarHeight,
  },
 
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
   
  },
 
  goback(){
    wx.navigateBack({     
    })
  }
})

    以上就是通过wx.getSystemInfo获取到系统信息，让导航栏进行适配，通过custom，使得整个屏幕都在你的掌握之中。

    bye