本文讨论了一个在H5中正常显示的步骤条组件，在iOS和Android平台上空白显示的问题。开发者在尝试解决安卓和iOS设备显示问题时，详细介绍了组件结构、代码实现及调用方式，寻求帮助以找到可能的原因和解决方案。
一个步骤条组件，分为两个模块，一个为 Step-Item，一个为 Step，代码如下所示。
{{ currentStepNumber }}
{{ title }}
{{ description }}
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
}
}
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'
}
})
}
}
}
然后，调用组件代码如下：
export default {
data () {
return {
step: 0
}
},
methods: {
next () {
this.step++
}
}
}
在H5显示正常，但是 android和 IOS 都是一片空白，为什么呢？困惑了两天了希望得到帮助，谢谢。
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
