版本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>
2 个回复
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