Weex-UI 导航栏适配

Weex-UI 导航栏适配

第一步:新建一个适配js文件,文件名称platDifferent.js

// 导航栏适配
function getStatusBarHeight () {
  var device = weex.config.env
  // iphoneX: width:1125, height:2436
  // iphoneXR: width:828, height:1792
  // iphoneXS: width:1125, height:2436
  // iphoneXs max: width:1242, height:2688
  if (device.platform === 'iOS') {
    if (device.deviceWidth === 1125 &&
      device.deviceHeight === 2436) {
      return 88
    } else if (device.deviceWidth === 828 &&
      device.deviceHeight === 1792) {
      return 88
    } else if (device.deviceWidth === 1242 &&
      device.deviceHeight === 2688) {
      return 88
    } else {
      return 40
    }
  } else if (device.platform === 'android') {
    return 0
  } else {
    return 0
  }
}
export default {
  getStatusBarHeight
}

第二步：引用组件wxc-minibar

1. 导入文件

import { WxcMinibar } from 'weex-ui'

2. 引入组件

components: {
    WxcMinibar
}

第三步：应用在weex-ui中导航栏组件wxc-minibar

1. 导入文件js文件

import platDifferent from '@/utils/platDifferent'

2. 定义变量

data () {
    return {
      statusBarHeight: platDifferent.getStatusBarHeight(),
    }
  }

3. 引用到组件中

• 注意点1:需要给组件外面套一层div 设置其背景颜色和wxc-minibar的背景颜色一致
• 注意点2:iOS如果设置了安全区域，需要把安全区域设置去掉

<div class="top">
<wxc-minibar :style="{ 'margin-top': statusBarHeight + 'px' }"></wxc-minibar>
<div>