1888
1888
  • 发布:2025-04-10 10:11
  • 更新:2025-04-10 20:05
  • 阅读:137

node-sass,4.57版本,子组件加样式表现不一致

分类:uni-app

版本4.57

vue2,在子组件的标签中添加样式display:block;时,app和微信小程序表现不一致

parent.vue  
<template>  
    <view class="main-wrapper">  
        <view class="header">  
            <view class="search">  
                <input placeholder="搜索..." />  
            </view>  
            <child class="cond"></child>  
        </view>  
        <view class="content">  
            <view>sample1</view>  
            <view>sample</view>  
            <view>sample</view>  
            <view>sample</view>  
            <view>sample</view>  
            <view>sample</view>  
            <view>sample</view>  
            <view>sample</view>  
            <view>sample</view>  
            <view>sample</view>  
            <view>sample</view>  
            <view>sample</view>  
            <view>sample</view>  
            <view>sample</view>  
            <view>sample</view>  
            <view>sample</view>  
            <view>sample</view>  
            <view>sample</view>  
            <view>sample</view>  
            <view>sample</view>  
            <view>sample</view>  
            <view>sample</view>  
            <view>sample</view>  
            <view>sample</view>  
            <view>sample</view>  
            <view>sample</view>  
            <view>sample</view>  
            <view>sample</view>  
            <view>sample</view>  
            <view>sample</view>  
            <view>sample</view>  
            <view>sample</view>  
            <view>sample</view>  
            <view>sample</view>  
            <view>sample</view>  
            <view>sample</view>  
            <view>sample</view>  
            <view>sample</view>  
            <view>sample</view>  
            <view>sample</view>  
            <view>sample</view>  
            <view>sample</view>  
            <view>sample</view>  
            <view>sample</view>  
            <view>sample</view>  
            <view>sample</view>  
            <view>sample</view>  
            <view>sample9</view>  
        </view>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {}  
        }  
    }  
</script>  

<style lang="scss" scoped>  
    .main-wrapper {  
        background-color: lightgray;  

        .header {  
            background-color: #fff;  

            position: sticky;  
            top: 0;  
            z-index: 99;  

            .search {  
                width: 100vw;  
                padding: 40rpx;  
                box-sizing: border-box;  
            }  

            .cond {  
                display: block; // 问题是在这里,加上后APP和微信小程序表现不一致  
            }  
        }  
    }  
</style>
child.vue  
<template>  
    <view class="child-list">  
        <view class="child-item" v-for="(item,index) in list" :key="index"><text>{{item}}</text></view>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                list: [1, 2, 3, 4]  
            }  
        }  
    }  
</script>  

<style lang="scss" scoped>  
    .child-list {  
        display: flex;  
        width: 100vw;  

        .child-item {  
            flex: 1;  
            text-align: center;  
            border: 1rpx solid #f8f8f8;  
        }  
    }  
</style>
2025-04-10 10:11 负责人:无 分享
已邀请:
DCloud_UNI_JBB

DCloud_UNI_JBB

稍等我排查下

DCloud_UNI_JBB

DCloud_UNI_JBB

在小程序里面,组件上的 class style 并不会直接作用在 组件根节点,所以子组件上面加了class也不生效

  • 1888 (作者)

    在APP中,子组件的样式display:flex失效了。。。前一个版本是没这个问题的呢

    2025-04-12 11:04

  • DCloud_UNI_JBB

    回复 hhh: 可以发个复现demo吗

    2025-04-12 13:42

要回复问题请先登录注册