常见问题

如何实现沉浸式导航栏

实现沉浸式导航，可以使用原生导航栏或者H5导航栏，针对自己的业务场景选择需要；

原生导航栏实现如下：

• 设置相同的导航栏、状态栏、页面背景色；

• 修改项目配置文件profile.json，参考如下：

  {
      "launchParams": {
      "showTitleBar": "YES",//显示原生标题栏
      "enableSafeArea": "NO",//只针对iOS设置，禁止掉安全区域
      "fitsSystemWindows": "NO" //android专用，"YES" 去掉状态栏占位， "NO" 显示状态栏占位
      "backgroundColor":"#f9f9f9", //自定义标题栏和状态栏的颜色
      },
   }
  

H5(插件包)导航栏实现如下：

• 修改项目配置文件profile.json，部分代码参考如下：

  {
      "launchParams": {            //页面参数
          "showTitleBar": "NO",//隐藏原生标题栏
          "enableScrollBar": "YES", //开启容器滚动
          "enableSafeArea": "NO",//只针对iOS设置，禁止掉安全区域
          "fitsSystemWindows": "YES" //android专用，"YES" 去掉状态栏占位， "NO" 显示状态栏占位
      },
  }
  
  

• 引入Sticky粘性组件 (opens new window)和NavBar导航栏组件 (opens new window)。

• 通过调用状态栏信息接口 (opens new window)返回的高度设置为导航栏的padding-top的值。

• 部分代码参考如下

  <div id="app">
      <mx-sticky @scroll="pageScroll">
          <mx-nav-bar
          :more="true"
          title="沉浸式导航"
          :style="{ 'padding-top': ptop}"
          :safe-area-inset-top="false"
          :background="navBgColor"
          />
  	</mx-sticky>
  </div>
  <style lang="scss" scoped>
  @import './app.scss';
  </style>
  

  app.scss
  //case1----背景图作为沉浸式
  #app {  
     background-image: url('../../assets/image/circle_bg_health@3x.png');  
     background-size: 100% auto;
     background-repeat: no-repeat;
     background-position: left top;
  }
  //case2----背景色作为沉浸式
  #app {
     background-color: #f6f78f;
  }
  

  export default {
    name: 'App',
    data() {
      return {
        stickyIsFixed: null,
        ptop: '0px', //导航pading-top的值 
      }
    },
    computed: {
      navBgColor() {
        return this.stickyIsFixed ? '#fff' : 'transparent' //容器滚动时候导航条变白
      },
    },
    created() {
      this.getStatusBarHeight() //获取状态栏高度
    },
    methods: {
        //获取状态栏高度
      getStatusBarHeight() {
        this.$bridge.getStatusBar().then((res) => {
          this.ptop = `${res.height}px`
        })
      },
      //滚动事件  
      pageScroll(e) {
        this.stickyIsFixed = e.isFixed
      }
    }
  }
  

H5(在线链接式)导航栏实现如下：

• 在项目路由地址中添加参数：
  meiju://com.midea.meiju/main?type=jumpWebViewNew&needNavi=0&fitsSystemWindows=true&enableSafeArea=false&url=XXXXXXXXXXX

• 路由参数说明：

参数名	说明	版本要求
needNavi	是否显示导航栏；0隐藏，1显示
fitsSystemWindows	Android独有，是否将顶部状态栏高度交给H5控制；true为开启，开启后实现沉浸式状态栏	^8.1
enableSafeArea	iOS独有，是否禁掉安全区域；false为关闭，true为开启，开启后刘海屏底部弧度范围内不显示内容（解决顶部白边问题）	^8.2

• 代码处理:
  tips:
  1. 在需要沉浸式效果的页面中添加下列代码
  2. 由于依赖路由参数对webview做设置，若一个项目中存在非沉浸式页面跳转到沉浸式页面，需要用美居bridge路由方式跳转
  3. 导航栏效果请自行按照具体的UI效果实现

// home.vue
// 一般场景是首页需要沉浸式，则在首页添加即可
created() {
  // 需在美居环境下调用下列接口，可自行判断是否在美居环境
  this.$bridge.getAllBarHeight().then((res) => {
    if (res.navigatorBar > 0) {
      // 隐藏导航栏
      this.$bridge.hideNavigationBar({
        hide: '1',
      })
    }
    if (res.bottomArc > 0) {
      // 底部安全区交给H5控制
      this.$bridge.setBottomStatusBar({
        isDisplay: '1', // 安全区域是否显示 0：安全区域不显示任何内容，app控制，1：安全区域显示内容，H5控制
      })
    }
    /**
     * iOS非全面屏手机，沉浸式页面存在顶部白边问题
     * 美居版本8.2及以上可以通过路由参数enableSafeArea解决
     * 美居版本8.2以下需要隐藏状态栏
     */
    if (this.isIos && res.bottomArc == 0) {
      this.$bridge.hideStatusBar({
        hide: '1',
      })
    }
  })
  /**
   * 可以按需调用setStatusBar接口，设置状态栏字体颜色模式
   * 注：安卓系统美居版本低于8.1不支持fitsSystemWindows沉浸式状态栏，默认状态栏背景为白色，不可将状态栏字体颜色模式也设置为白色
   */
  this.$bridge.setStatusBar({
    colorMode: '2', // 设置状态栏字体颜色模式，1：黑色字体色系，2：白色字体色系
  })
}