Weex系列（1）-App端自定义导航条
2017-12-03 本文已影响256人
KChuck
最近App项目用Weex重写，需要适配iOS和安卓各机型。
首先解决导航条适配，iOS除了新出的iPhone X导航条高度是88之外，其他设备都是64（我们的app最低支持iOS 9.0系统），而安卓的统一是45，所以先判断平台及设备。（weex屏幕默认宽高是750 * 1334，逻辑分辨率是375 * 667，导航条在css中设置的高度要乘以2）
导航条的子控件有：左边图片、中间文字及右边图片或文字。
左边增加属性判断是返回按钮(点击执行pop方法)或者其他按钮
<!--*******自定义导航条*******-->
<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"></image>
</div>
<div class="right" @click="rightButtonClicked" v-if="showRight">
<!--如果显示右边item ， 图片或者文字 2选1 -->
<text class="right-text" v-if="rightText">{{rightText}}</text>
<image :src="rightImage" class="left-button" v-if="rightImage"></image>
</div>
</div>
</div>
</template>
<style scoped>
/*导航条高度，预留90px，X加上86即是（88*2=176），iOS其他设备增加38即是128/
.iPhoneXDiv {
height: 86px;
}
.iOSDiv {
height: 38px;
}
.android {
height: 0px;
}
.navbar {
width: 750px;
top: 0px;
left: 0px;
background-color: #FF9200;
}
/*************************/
/*大佈局样式*/
.subviews {
height: 90px;
width: 750px;
left: 0px;
background-color: #FF9200;
}
/*中间文字样式*/
.titletext {
font-size: 36px;
color: white;
position: relative;
width: 750px;
height: 90px;
text-align: center;
line-height: 90px;
bottom: 0;
}
/*左边图片*/
.left {
justify-content: center;
position: absolute;
align-items: center;
flex: 1;
height: 90px;
left: 20px;
bottom: 0px;
width: 50px;
}
/*图片按钮*/
.left-button {
width: 50px;
height: 50px;
/*margin-left: 40px;*/
}
/*右边图片*/
.right {
justify-content: center;
position: absolute;
align-items: center;
flex: 1;
height: 90px;
right: 20px;
bottom: 0px;
width: 50px;
/*background-color: white;*/
}
/*右边文字*/
.right-text {
font-size: 30px;
color: white;
position: absolute;
right: 20px;
width: 100px;
height:90px;
text-align: center;
bottom: 0;
}
</style>
<script>
var device = weex.config.env;
const Navigator = weex.requireModule('navigator');
export default {
/*props 属性列表*/
props: {
/*返回图片*/
leftImage: {
type: String,
default: "img/other/backbtn.png"
},
/*Title*/
titleText: {
type: String,
default: "Title"
},
/*是否显示左边图片*/
showLeft: {
type: Boolean,
default: true
},
/*showLeft=true时,左边是否是点击返回事件，否，则显示其他图片，重新给leftImage属性赋值*/
isBack: {
type: Boolean,
default: true
},
/*是否显示右边item*/
showRight: {
type: Boolean,
default: false
},
/*右边文字*/
rightText: {
type: String,
default: ""
},
/*右边图片*/
rightImage: {
type: String,
default: ""
}
},
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) {
if (this.isBack) //点击pop返回
{
console.log('click back');
Navigator.pop({}, e => {
});
}
else //其他操作
{
console.log('LeftItemClicked');
this.$emit('LeftItemClicked');
}
}
},
//右边点击事件
rightButtonClicked() {
if (this.showRight) {
console.log('RightItemClicked');
this.$emit('RightItemClicked');
}
},
}
};
</script>
使用
<template>
<div class="container">
<!--导航条-->
<div class="navbar">
<!--显示左边图片,右边隐藏-->
<NavBar
:show-left="true"
:is-back="false"
:left-image="BackImage"
:title-text="SetTitleText"
:show-right="false"
v-on:LeftItemClicked = "popback">
</NavBar>
</div>
</div>
</template>
<script>
/*引用自定义的导航条控件*/
import NavBar from '../lbase/NavigationBar.vue';
export default {
components:{NavBar}, //设置组件
data(){
return{
SetTitleText:"设置",
BackImage: 'img/other/backbtn.png',
}
},
methods: {
//点击左边按钮事件
popback: function () {
},
}
};
</script>
<style scoped>
.navbar{
top: 0px;
width: 750px;
}
.container{
background-color: rgba(245,245,245,1);
}
</style>
在iPhone X 效果图：
Simulator Screen Shot - iPhone X - 2017-12-03 at 15.35.21.png
