roomCard.nvue代码如下
<template>
<view class="price-container">
<button class="booking-button"><text class="bt-text">立即预订</text></button>
</view>
</template>
<script>
export default {
name: 'roomCard',
data() {
return {
}
},
methods: {
}
}
</script>
<style>
/*在另一个nvue页面中引用此组件时，这里设置的背景色在app下明显失效*/
.booking-button {
height: 68rpx;
background-color: #007aff;
}
.booking-button .bt-text {
color: #ffffff;
font-size: 28rpx;
}
</style>booking.nvue代码如下：
<template>
<view class="page-container">
<room-card></room-card>
</view>
</template>
<script>
import roomCard from './components/roomCard.nvue'
export default {
data() {
return {
}
},
components: {
roomCard
}
}
</script>
3 个回复
DCloud_UNI_JBB
可以发个复现代码嘛？
1***@qq.com (作者)
就是我在booking.nvue（booking.nvue是tabbar页面）里面引用了roomCard.nvue，而roomCard.nvue中又使用了button这个内置组件，button上有一个class写了一些自定义样式，在手机app模拟器（雷电模拟器）中作用于button的class失效了，但是在小程序中是正常的。
DCloud_UNI_JBB
可以先用view代替button解决一下。 nvue 不再迭代，推荐使用 uni-app x
1***@qq.com (作者)
好的
2025-04-11 09:47