weex - switch渲染android失败
本文介绍了weex - switch渲染android失败的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
这是官方示例
<template>
<div>
<div class="example">
<text class="label">normal</text>
<switch></switch>
</div>
<div class="example">
<text class="label">checked</text>
<switch checked="true"></switch>
</div>
<div class="example">
<text class="label">disabled</text>
<switch disabled="true" checked="true"></switch>
<switch disabled="true"></switch>
</div>
<div class="example">
<text class="label">onchange</text>
<switch class="switch" @change="onchange"></switch>
<text class="info">{{checked}}</text>
</div>
</div>
</template>
<script>
var modal = weex.requireModule('modal')
export default {
data () {
return {
checked: false
}
},
methods: {
onchange (event) {
console.log(`onchage, value: ${event.value}`)
this.checked = event.value
modal.toast({
message: 'This is a toast',
duration: 0.3
})
},
}
}
</script>
<style scoped>
.example {
flex-direction: row;
justify-content: flex-start;
margin-top: 60px;
}
.switch {
min-width: 100px;
}
.label {
font-size: 40px;
line-height: 60px;
width: 350px;
color: #666;
text-align: right;
margin-right: 20px;
}
.info {
font-size: 30px;
line-height: 60px;
color: #BBB;
margin-left: 10px;
}
</style>
模拟器android版本:7.0
Web渲染效果
模拟器渲染效果
真机(android 5.x)和模拟器一样
如果注释掉
.example {
flex-direction: row;
justify-content: flex-start;
margin-top: 60px;
}
也可渲染出来
解决方案
你先单独写一个页面,就一个简单的div包一个switch,看看能不能显示,如果能的话就说明是你css的问题。
然后最好安卓端更新一下sdk
这篇关于weex - switch渲染android失败的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文