vue.js - Weex H5显示正常,android和ios皆显示一片空白,为什么呢?
本文介绍了vue.js - Weex H5显示正常,android和ios皆显示一片空白,为什么呢?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
- 一个步骤条组件,分为两个模块,一个为 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屋!
查看全文