參考：Weex系列（1）-App端自定義導(dǎo)航條
最近也在對(duì)weex項(xiàng)目做iOS適配工作玻淑，發(fā)現(xiàn)小伙伴們對(duì)于導(dǎo)航欄這塊都放在單個(gè)頁面單獨(dú)寫的淳附，只要有一個(gè)小問題嘱么，適配起來就比較蛋疼糠悯，于是將所有頁面的導(dǎo)航欄剝離處理統(tǒng)一處理甥雕，借鑒上述文章內(nèi)容做了一點(diǎn)小小的改動(dòng)優(yōu)化。
iOS除了新出的iPhone X導(dǎo)航條高度是88之外楞艾，其他設(shè)備都是64（我們的app最低支持iOS 9.0系統(tǒng)）参咙，而安卓的統(tǒng)一是45龄广，所以先判斷平臺(tái)及設(shè)備硫眯。
weex屏幕默認(rèn)寬高是750 * 1334蕴侧，邏輯分辨率是375 * 667，導(dǎo)航條在css中設(shè)置的高度要乘以2
導(dǎo)航條的子控件有：左邊圖片两入、中間文字及右邊圖片或文字净宵。
左邊增加屬性判斷是返回按鈕(點(diǎn)擊執(zhí)行pop方法)或者其他按鈕
生成一個(gè)名叫 NavigationBar.vue 的文件 將下面的代碼貼入
<!--*******自定義導(dǎo)航條*******-->
<template>
<div>
<!--iPhoneX -->
<div class="iPhoneXDiv navbar" v-if="isiPhoneX"></div>
<!--其他iOS設(shè)備 -->
<div class="iOSDiv navbar" v-else-if="isiOS"></div>
<!--安卓設(shè)備 -->
<div class="android navbar" v-else-if="isAndroid"></div>
<div class="subviews">
<!--Title-->
<text class="titletext">{{titleText}}</text>
<!--左邊圖片-->
<div class="left" @click="leftButtonClicked" v-if="showLeft">
<image :src="leftImage" class="left-button" :disabled="leftButtonDisabled"></image>
</div>
<div class="right-container" @click="rightButtonClicked" v-if="showRight">
<!--如果顯示右邊item ， 圖片或者文字 2選1 -->
<text class="right-text" v-if="rightText">{{rightText}}</text>
<image :src="rightImage" class="right-image" :style="{width:rightImageWidth + 'px', height:rightImageHeight + 'px'}" v-if="rightImage" :disabled="rightButtonDisabled"></image>
</div>
</div>
</div>
</template>
<script>
var device = weex.config.env;
const Navigator = weex.requireModule('navigator');
export default {
/*props 屬性列表*/
props: {
/*返回圖片*/
leftImage: {
type: String,
default: "local://icon_back.png" //使用的本地資源圖片
},
/*Title*/
titleText: {
type: String,
default: ""
},
/*是否顯示左邊圖片*/
showLeft: {
type: Boolean,
default: true
},
/*showLeft=true時(shí),左邊是否是點(diǎn)擊返回事件裹纳，否择葡，則顯示其他圖片，重新給leftImage屬性賦值*/
isBack: {
type: Boolean,
default: true
},
leftButtonDisabled: {
type: Boolean,
default: true
},
/*是否顯示右邊item*/
showRight: {
type: Boolean,
default: false
},
/*右邊文字*/
rightText: {
type: String,
default: ""
},
/*右邊圖片*/
rightImage: {
type: String,
default: ""
},
rightImageWidth:{
type:[Number, String],
default:"38"
},
rightImageHeight:{
type:[Number, String],
default:"38"
},
rightButtonDisabled: {
type: Boolean,
default: true
},
},
data() {
return {
isiPhoneX: (device.platform === 'iOS') && (device.deviceWidth === 1125) && (device.deviceHeight === 2436),
isiOS: (device.platform === 'iOS'),
isAndroid: (device.platform === 'android'),
TitleText: "",
}
},
methods: {
//左邊點(diǎn)擊事件
leftButtonClicked() {
if (this.showLeft) {
console.log('LeftItemClicked');
this.$emit('LeftItemClicked');
}
},
//右邊點(diǎn)擊事件
rightButtonClicked() {
if (this.showRight) {
console.log('RightItemClicked');
this.$emit('RightItemClicked');
}
},
}
};
</script>
<style scoped>
/*導(dǎo)航條高度剃氧，預(yù)留90px敏储，X加上86即是（88*2=176），iOS其他設(shè)備增加38即是128*/
.iPhoneXDiv {
height: 88px;
}
.iOSDiv {
height: 40px;
}
.android {
height: 0px;
}
.navbar {
width: 750px;
top: 0px;
left: 0px;
background-color: #FBFBFD;
}
/*************************/
/*大佈局樣式*/
.subviews {
height: 86px;
width: 750px;
left: 0px;
background-color: #FBFBFD;
border-bottom-color: #D9DDE3;
border-bottom-width: 2px;
}
/*中間文字樣式*/
.titletext {
font-size: 36px;
color: #2D2F3B;
position: relative;
width: 750px;
height: 88px;
text-align: center;
line-height: 88px;
bottom: 0;
}
/*左邊圖片*/
.left {
justify-content: center;
position: absolute;
align-items: center;
flex: 1;
height: 88px;
left: 20px;
bottom: 0px;
width: 50px;
}
/*圖片按鈕*/
.left-button {
width: 22px;
height: 36px;
}
/*右邊圖片*/
.right-container {
justify-content: center;
position: absolute;
align-items: center;
flex: 1;
height: 88px;
right: 30px;
bottom: 0px;
}
.right-image {
width: 38px;
height: 38px;
}
/*右邊文字*/
.right-text {
font-size: 32px;
color: #1787F6;
}
</style>
以上是內(nèi)容單獨(dú)卸載vue文件中如：NavigationBar.vue
在其它vue文件中使用的方法
<template>
<div class="container">
<!--導(dǎo)航條-->
<div class="navbar">
<!--顯示左邊圖片,右邊隱藏-->
<NavBar
:show-left="true"
:is-back="true"
:title-text="title"
:show-right="true"
:right-image="rightImage"
:right-image-width="46"
:right-image-height="10"
@LeftItemClicked = "goback"
@RightItemClicked = "rightClick">
</NavBar>
</div>
</div>
</template>
<script>
/*引用自定義的導(dǎo)航條控件*/
import NavBar from '../lbase/NavigationBar.vue';
export default {
components:{NavBar}, //設(shè)置組件
data(){
return{
title:"設(shè)置",
}
},
methods: {
//點(diǎn)擊左邊按鈕事件
goback: function () {
//返回操作朋鞍，我們此處調(diào)用的時(shí)iOS原生方法
},
rightButtonClick: function() {
//點(diǎn)擊右側(cè)按鈕操作
},
}
};
</script>
<style scoped>
.navbar{
top: 0px;
width: 750px;
}
.container{
background-color: rgba(245,245,245,1);
}
</style>
