vue.js - Weex H5显示正常，android和ios皆显示一片空白，为什么呢？

问题描述

问 题

1. 一个步骤条组件，分为两个模块，一个为 Step-Item，一个为 Step，代码如下所示。

<template>
  <div class="step-item" :class=" { 'step-item-with-tail' : !currentStepLast} ">
    <div :class="'step-item-head ' + 'step-item-head-' + currentStatus">
      <div class="step-item-head-inner">
        <text v-if="currentStatus !== 'finish'" class="step-item-number">{{ currentStepNumber }}</text>
        <text v-else class="step-item-icon"></text>
      </div>
    </div>
    <div :class="'step-item-main ' + 'step-item-main-' + currentStatus">
      <text class="step-item-title">{{ title }}</text>
      <text class="step-item-description">{{ description }}</text>
    </div>
    <div :class="'step-item-tail ' + 'step-item-tail-' + currentStatus" v-if="!currentStepLast"></div>
  </div>
</template>
<script>
  export default {
    name: 'o-step-item',
    props: {
      title: String,
      description: String,
      stepNumber: Number,
      stepLast: Boolean,
      status: String
    },
    data () {
      return {
        currentStatus: 'wait',
        currentStepNumber: 0,
        currentStepLast: false
      }
    },
    created () {
      this.currentStatus = this.status
      this.currentStepNumber = this.stepNumber
      this.currentStepLast = this.stepLast
    }
  }
</script>
<style scoped>
</style>

<template>
  <div class="step">
    <slot></slot>
  </div>
</template>
<script>
  export default {
    name: 'o-step',
    props: {
      value: Number
    },
    data () {
      return {
        current: 0
      }
    },
    created () {
      this.current = this.value
    },
    mounted () {
      this._mapPropsToChildComponent()
    },
    watch: {
      value (val) {
        this.current = val
      },
      current (val) {
        this._mapPropsToChildComponent()
        this.$emit('input', val)
      }
    },
    methods: {
      _mapPropsToChildComponent () {
        const _this = this
        const children = this.$children[0].$children
        const length = children.length - 1
        children.forEach((child, index) => {
          child.currentStepNumber = (index + 1).toString()
          child.currentStepLast = index === length
          if (index === _this.current) {
            child.currentStatus = 'process'
          } else if (index < _this.current) {
            child.currentStatus = 'finish'
          } else {
            child.currentStatus = 'wait'
          }
        })
      }
    }
  }
</script>
<style></style>

然后，调用组件代码如下：

<template>
  <div>
    <div class="button" @click="next">
      <text class="btn-text">Next</text>
    </div>
    <div>
      <OStep v-model="step">
        <OStepItem title="step 1"></OStepItem>
        <OStepItem title="step 2"></OStepItem>
        <OStepItem title="step 3"></OStepItem>
      </OStep>
    </div>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        step: 0
      }
    },
    methods: {
      next () {
        this.step++
      }
    }
  }
</script>

在H5显示正常，但是 android和 IOS 都是一片空白，为什么呢？困惑了两天了希望得到帮助，谢谢。

解决方案

建议会用xcode或者android studio看一下log，便于解决native端的各类问题。

这篇关于vue.js - Weex H5显示正常，android和ios皆显示一片空白，为什么呢？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！