最近使用uniapp+vue3+uview-plus开发微信小程序中,使用uview-plus自定义底部导航栏tabbar时,遇到修改默认样式不生效问题
使用传统的 ::v-deep、:deep、::v-deep,或者style标签中去掉scoped也是无效的,有好的方案欢迎交流,解决方案如下:
<script lang="ts">
export default {
options: { styleIsolation: 'shared' }
}
</script>
<script setup lang="ts">
import { ref } from "vue";
import { storeToRefs } from 'pinia'
import { useTabbarStore } from '@/stores'
const tabbarStore = useTabbarStore()
const { list, activeTab } = storeToRefs(tabbarStore)
const tabbarProps = ref({
value: activeTab,
border: false,
zIndex: 999,
activeColor: "#333",
inactiveColor: "#7A7E83",
fixed: true,
placeholder: true,
safeAreaInsetBottom: true
})
const handleChange = (index: number) => {
tabbarStore.setActiveTab(index)
uni.switchTab({
url: list.value[index].pagePath
})
}
</script>
<style lang="scss">
::v-deep .u-tabbar__content {
border-top-left-radius: 46rpx;
border-top-right-radius: 46rpx;
box-shadow: 0px 0px 10rpx 4rpx rgba(0, 0, 0, 0.08);
.u-tabbar__content__item-wrapper {
height: 78rpx;
}
.u-tabbar-item__text {
font-size: 22rpx;
font-family: PingFang-SC;
}
}
</style>