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>
相关推荐
spmcor14 小时前
身份证读卡“无感登录”方案实践:从手动点击到自动检测
uni-app
PedroQue9919 小时前
uni-router v1.8.0新增冷启动守卫补执行
前端·uni-app
PedroQue992 天前
uni-router v1.7.0重磅更新:守卫重定向自由掌控
前端·uni-app
一份执念4 天前
uni-app项目 (vue+vite + uni-UI)中引入umd格式JS文件,微信小程序中导入报错处理方案
前端·uni-app·echarts
PedroQue994 天前
V1.6.1性能优化:高频路径提速与代码精简
前端·uni-app
夏碧笔6 天前
uni-app跨端地图实战:用第三方LBS替代微信平台收费服务
uni-app
用户69903048487510 天前
try catch使用场景 处理同步代码错误兼容用的
javascript·uni-app
ITKEY_11 天前
uniapp微信开发者工具 更改AppID失败 touristappid
uni-app
Geek_Vison11 天前
APP瘦身实战:从80MB+砍到15MB——基于小程序容器技术剥离APP非核心业务的实践分享
小程序·uni-app·mpaas
CHB11 天前
HDC2026 演讲实录|AI 驱动的跨端进化:利用 uni-agent 快速构建高性能鸿蒙应用
uni-app·harmonyos