uniapp+vue3+uview-plus修改默认样式

最近使用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>
相关推荐
2501_9151063214 小时前
iOS数据采集技术详解:从性能监控到崩溃分析的全链路实践
android·ios·小程序·https·uni-app·iphone·webview
我爱写代码i1 天前
AI对话绘画数字人源码 - uniapp前端
前端·人工智能·uni-app
ModyQyW1 天前
vite-plugin-uni-pages 更新了什么
前端·uni-app
2501_915918412 天前
Flutter项目配置iOS混淆的详细步骤与工具推荐
android·flutter·ios·小程序·uni-app·cocoa·iphone
梦曦i2 天前
create-uni-app v1.2.0:交互体验优化
前端·uni-app
lhldsg2 天前
智慧场馆解决方案小程序开发实战:从架构设计到部署指南
java·小程序·uni-app
skiyee2 天前
🚀 用 17 行代码给 UniApp 加上全局登录拦截
前端·uni-app
Mark108592 天前
【踩坑】Uni-app微信小程序自定义组件在 Flex 布局中未铺满整行
微信小程序·小程序·uni-app
梦曦i2 天前
create-uni-app v1.1.0:结构化生成,工程骨架更规范
前端·uni-app
2501_916007473 天前
Flutter与游戏App加固避坑指南:如何为混合开发与高交互应用选对安全方案?
安全·flutter·游戏·ios·小程序·uni-app·iphone