用vue 写的组件ios渲染不出来

Question

navbar:vue实现
`<template>

<div class="container" :style="{height:height+'px', backgroundColor:backgroundColor}"  :data-role="dataRole">
    <div class="common left_div item_text"  :style="{height:height+'px'}" @click="onclickleftitem">
        <image class="common image" v-if="leftItemSrc" :src="leftItemSrc" ></image>
        <text class="common" v-if="leftItemTitle" :style="{color:leftItemColor}"> {{leftItemTitle}}</text>
    </div>
    <div class="common center_div" :style="{height:height+'px'}" >
        <text class="center_text" :color="titleColor">{{title}}</text>
    </div>
    <div class="common right_div"  :style="{height:height+'px'}"  @click="onclickrightitem">
        <text class="common item_text" v-if="rightItemTitle" :style="{color:rightItemColor}"> {{rightItemTitle}}</text>
        <image class="common image" v-if="rightItemSrc" :src="rightItemSrc" ></image>
    </div>
</div>

</template>

<style scoped>

.container {
    flex-direction: row;
    /*position: absolute;*/
    top: 100px;
    left: 0;
    right: 0;
    width: 750px;
}

.common {
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-direction: row;
}
.image{
    width: 50px;
    height: 50px;
}

.left_div {
    flex: 0.3;
    margin-left: 16px;
    justify-content: flex-start;
}

.center_div {
    flex: 0.4;
}

.right_div {
    margin-right: 16px;
    flex: 0.3;
    justify-content: flex-end;
}

.center_text {
    text-align: center;
    font-size: 36px;
    font-weight: bold;
}
.item_text {
    font-size: 32px;
    text-align: left;
}

</style>

<script>

export default {
    props:{
        'dataRole': {
            default: function () {
              return 'navbar';
            }
        },
        //导航条背景色
        backgroundColor: {default:'black'},
        //导航条高度
        height: {default:88},
        //导航条标题
        title: {default:""},
        //导航条标题颜色
        titleColor: {default:'black'},
        //右侧按钮图片
        rightItemSrc: {default:''},
        //右侧按钮标题
        rightItemTitle: {default:''},
        //右侧按钮标题颜色
        rightItemColor: {default:'black'},
        //左侧按钮图片
        leftItemSrc: {default:''},
       //左侧按钮标题
        leftItemTitle: {default:''},
        //左侧按钮颜色
        leftItemColor: {default:'black'},
    },
    methods: {
        onclickrightitem: function (e) {
            this.$emit('clickrightitem',{})
        },
        onclickleftitem: function (e) {
            this.$emit('clickleftitem',{})
        }
    }
}

</script>
`
navpage 实现

<template>
    <div class="wrapper">
        <yc_navbar :dataRole="dataRole" :height="height" :backgroundColor="backgroundColor" :title="title"
                    :titleColor="titleColor" :leftItemSrc="leftItemSrc" :leftItemTitle="leftItemTitle"
                    :leftItemColor="leftItemColor" :rightItemSrc="rightItemSrc"
                    :rightItemTitle="rightItemTitle" :rightItemColor="rightItemColor"
                   @clickrightitem="onclickrightitem" @clickleftitem="onclickleftitem"></yc_navbar>

        <div class="wrapper" :style="{marginTop:height+'px'}" >
            <slot></slot>
        </div>
    </div>
</template>

<style>
    .wrapper {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 750px;
    }

</style>

<script>
    import yc_navbar from './yc-navbar.vue'
    export default {
        props:{
            'dataRole': {default: 'navbar'},
            //导航条背景色
            backgroundColor: {default:'black'},

            //导航条高度
            height: {default:88},

            //导航条标题
            title: {default:""},

            //导航条标题颜色
            titleColor: {default:'black'},

            //右侧按钮图片
            rightItemSrc: {default:''},


            //右侧按钮标题
            rightItemTitle: {default:''},

            //右侧按钮标题颜色
            rightItemColor: {default:'black'},

            //左侧按钮图片
            leftItemSrc: {default:''},

            //左侧按钮标题
            leftItemTitle: {default:''},

            //左侧按钮颜色
            leftItemColor: {default:'black'},
        }, 
        components: {
            yc_navbar
        },
        methods : {
            onclickrightitem() {
                this.$emit('rightitemclick',{});
            },
            onclickleftitem() {
                this.$emit('leftitemclick',{});
            }
        }

    }
</script>

将他们组装成在一起

<template>
    <div>
        <yc_navpage height="88" background-color="red" v-on:rightitemclick="clickrightitem" title="个人中心"
                    leftItemSrc="http://192.168.1.101:8081/images/13.jpg" leftItemTitle="通知" rightItemTitle="设置"
                    v-on:leftitemclick="clickrightitem">
            <div>
                <text style="color: red;background-color: aliceblue">首页</text>
            </div>

        </yc_navpage>

    </div>
</template>
<style>
    body{
        background-color:#ff0000;

    }
</style>
<script>
    import yc_navbar from './components/yc-navbar.vue'
    import yc_navpage from './components/yc-navpage.vue'

    var modal = weex.requireModule('modal');
    export default{
        data(){
            return{
                msg:'hello vue'
            }
        },
        components:{
            yc_navbar,
            yc_navpage,
        },
        created:function () {

        },
        methods: {
            clickrightitem () {
                modal.toast({
                    message:'naviBar_rightItem_click',
                    duration:10
                });
            }
        }
    }
</script>

使用npm run debug 生产的二维码 android可以正常跑，ios死活渲染不出来，这是啥情况

Answer 1

iOS下 navbar 必须把内容写在navbar标签内，才可以渲染，可以看看我提出的问题：https://segmentfault.com/q/10...