参考：Weex系列（1）-App端自定义导航条
最近也在对weex项目做iOS适配工作，发现小伙伴们对于导航栏这块都放在单个页面单独写的，只要有一个小问题，适配起来就比较蛋疼，于是将所有页面的导航栏剥离处理统一处理，借鉴上述文章内容做了一点小小的改动优化。
iOS除了新出的iPhone X导航条高度是88之外，其他设备都是64（我们的app最低支持iOS 9.0系统），而安卓的统一是45，所以先判断平台及设备。
weex屏幕默认宽高是750 * 1334，逻辑分辨率是375 * 667，导航条在css中设置的高度要乘以2
导航条的子控件有：左边图片、中间文字及右边图片或文字。
左边增加属性判断是返回按钮(点击执行pop方法)或者其他按钮
生成一个名叫 NavigationBar.vue 的文件 将下面的代码贴入
<!--*******自定义导航条*******-->
<template>
<div>
<!--iPhoneX -->
<div class="iPhoneXDiv navbar" v-if="isiPhoneX"></div>
<!--其他iOS设备 -->
<div class="iOSDiv navbar" v-else-if="isiOS"></div>
<!--安卓设备 -->
<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时,左边是否是点击返回事件，否，则显示其他图片，重新给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: {
//左边点击事件
leftButtonClicked() {
if (this.showLeft) {
console.log('LeftItemClicked');
this.$emit('LeftItemClicked');
}
},
//右边点击事件
rightButtonClicked() {
if (this.showRight) {
console.log('RightItemClicked');
this.$emit('RightItemClicked');
}
},
}
};
</script>
<style scoped>
/*导航条高度，预留90px，X加上86即是（88*2=176），iOS其他设备增加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>
以上是内容单独卸载vue文件中如：NavigationBar.vue
在其它vue文件中使用的方法
<template>
<div class="container">
<!--导航条-->
<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>
/*引用自定义的导航条控件*/
import NavBar from '../lbase/NavigationBar.vue';
export default {
components:{NavBar}, //设置组件
data(){
return{
title:"设置",
}
},
methods: {
//点击左边按钮事件
goback: function () {
//返回操作，我们此处调用的时iOS原生方法
},
rightButtonClick: function() {
//点击右侧按钮操作
},
}
};
</script>
<style scoped>
.navbar{
top: 0px;
width: 750px;
}
.container{
background-color: rgba(245,245,245,1);
}
</style>
网友评论