1009510944@qq.com
1009510944@qq.com
  • 发布:4 天前
  • 更新:4 天前
  • 阅读:30

微信小程序组件嵌套样式会有问题,在web页面上好的

分类:uni-app

定义了两个组件:

z-row组件:

<template>  
    <view class="flex flex-wrap" :class="[  
        justify ? '' + justify : '',  
        align ? '' + align : ''  
    ]">  
        <slot></slot>  
    </view>  
</template>  

<script>  
        export default {  
            props: {  
                justify: {  
                    type: String,  
                    default: ''  
                },  
                align: {  
                    type: String,  
                    default: ''  
                }  
            }  
        }  
</script>

z-col组件:

<template>  
    <view  :class="[  
        _span()  
    ]">  
        <slot></slot>  
    </view>  
</template>  

<script>  
    export default {  
        props: {  
            span: {  
                type: String,  
                default: 'df'  
            }  
        },  
        methods:{  
            _span(){  
                let p = {  
                    "2": "xs",  
                    "4": "sm",  
                    "5": "df",  
                    "6": "lg",  
                    "8": "xl"  
                }  
                return '' + p[this.span] || 'df'  
            }  
        }  
    }  
</script>  

<style>  
</style>  

使用示例:

<z-row>  
    <z-col span="2">  
        <view  class="pd10 mg10" :class="'radius ' + randColor()">2</view>  
    </z-col>  
    <z-col span="5" />  
    <z-col span="4">  
        <view  class="pd10 mg10" :class="'radius ' + randColor()">4</view>  
    </z-col>  
</z-row>

在H5渲染好好的:

但在微信小程序上就不行

通过调试后发现:微信小程序里组件嵌套有问题,导致样式失效

请问有什么好的解决方案吗?

4 天前 负责人:无 分享
已邀请:
1009510944@qq.com

1009510944@qq.com (作者)

顺便贴下在H5浏览器里渲染的效果图

要回复问题请先登录注册