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
- 导入文件
import { WxcMinibar } from 'weex-ui'
- 引入组件
components: {
WxcMinibar
}
第三步：应用在weex-ui中导航栏组件wxc-minibar
- 导入文件js文件
import platDifferent from '@/utils/platDifferent'
- 定义变量
data () {
return {
statusBarHeight: platDifferent.getStatusBarHeight(),
}
}
- 引用到组件中
- 注意点1:需要给组件外面套一层div 设置其背景颜色和wxc-minibar的背景颜色一致
- 注意点2:iOS如果设置了安全区域，需要把安全区域设置去掉
<div class="top">
<wxc-minibar :style="{ 'margin-top': statusBarHeight + 'px' }"></wxc-minibar>
<div>
