当前位置: 首页 > news >正文

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>

http://www.lryc.cn/news/464916.html

相关文章:

  • 数控机械制造工厂ERP适用范围有哪些
  • 华为配置 之 Console线路配置
  • 小米等手机彻底关闭快应用
  • 【每日一题】24.10.14 - 24.10.20
  • CMake与Qt4/Qt5的结合使用指南
  • TwinCAT3添加PLC轴,并建立PLC轴与NC轴的链接
  • Linux操作系统如何制作U盘启动盘
  • 如何防止SpringBoot中的jar反编译?解决相关报错及踩到的坑
  • Axios 基本使用
  • 前端大佬都在用的actionDelegationMiddleware究竟有多香?
  • 解决k8s集群中安装ks3.4.1开启日志失败问题
  • Qml-Item的Id生效范围
  • 【配色网站分享】
  • 【记录】Android|安卓平板 猫游戏(四款,peppy cat,含下载教程和链接)
  • 微前端架构及其解决方案对比
  • git add操作,文件数量太多卡咋办呢,
  • 搭建Golang gRPC环境:protoc、protoc-gen-go 和 protoc-gen-go-grpc 工具安装教程
  • Spring Boot 核心理解-自动装配
  • go 中指针的执行效率比较
  • 单链表的经典算法OJ
  • 视频网站开发:Spring Boot框架的高效实现
  • 【前端】如何制作一个自己的网站(11)
  • 【Conda】提高 Conda 下载速度与兼容性的完美指南
  • 【Flutter】页面布局:层叠布局(Stack、Positioned)
  • SpringBoot实现的汽车票在线预订系统
  • 集合框架14:TreeSet概述、TreeSet使用、Comparator接口及举例
  • uniapp获取底部导航tabbar的高度(H5)
  • 接口测试 —— 如何测试加密接口?
  • 033 商品搜索
  • 身份证二要素实名认证接口-身份证核验接口-身份证实名API