×

Weex系列(1)-App端自定义导航条

96
Xiah2018
2017.12.03 15:40* 字数 188

最近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
Weex
Web note ad 1