当前位置: 首页 > 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>

相关文章:

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

最近使用uniappvue3uview-plus开发微信小程序中&#xff0c;使用uview-plus自定义底部导航栏tabbar时&#xff0c;遇到修改默认样式不生效问题 使用传统的 ::v-deep、:deep、::v-deep&#xff0c;或者style标签中去掉scoped也是无效的&#xff0c;有好的方案欢迎交流&#xff…...

数控机械制造工厂ERP适用范围有哪些

在当今制造业高速发展的背景下&#xff0c;企业资源计划(ERP)系统已成为提升工厂管理效率、实现生产自动化与信息化的关键工具。特别是对于数控机械制造工厂而言&#xff0c;一个合适的ERP系统能够帮助其优化生产流程、提高产品质量、降低生产成本并增强市场竞争力。 1. 生产计…...

华为配置 之 Console线路配置

目录 简介&#xff1a; 知识点&#xff1a; 配置Console线路密码 1.密码认证模式 2.AAA认证模式 知识点&#xff1a; 总结&#xff1a; 简介&#xff1a; 使用PC模拟器与路由器相连&#xff08;与交换机相连原理一样&#xff09;&#xff0c;在关机状态下&#xff0c;使用…...

小米等手机彻底关闭快应用

文章目录 快应用的是非最终措施&#xff1a;撤销快应用隐私协议配套措施&#xff1a;安卓去除开屏广告 无用的操作&#xff1a;载快应用小米手机无用&#xff0c;其他手机可以尝试的操作关闭唤起快应用服务打开防止误触、后台启动其他应用 其他措施&#xff1a;冻结、加密快应用…...

【每日一题】24.10.14 - 24.10.20

10.14 直角三角形1. 题目2. 解题思路3. 代码实现&#xff08;AC_Code&#xff09; 10.15 回文判定1. 题目2. 解题思路3. 代码实现&#xff08;AC_Code&#xff09; 10.16 二次方程1. 题目2. 解题思路3. 代码实现&#xff08;AC_Code&#xff09; 10.17 互质1. 题目2. 解题思路3…...

CMake与Qt4/Qt5的结合使用指南

CMake与Qt4/Qt5的结合使用指南 一、同时使用Qt 4和Qt 5二、Qt构建工具2.1 AUTOMOC2.2 AUTOUIC2.3 AUTORCC 三、<ORIGIN>_autogen目标四、Visual Studio生成器五、Windows上的qtmain.lib六、其他文章推荐 在CMake中&#xff0c;您可以方便地找到并使用Qt 4和Qt 5库。Qt 4库…...

TwinCAT3添加PLC轴,并建立PLC轴与NC轴的链接

右键PLC选项&#xff0c;点击创建新项 在弹出的对话框中&#xff0c;选择PLC Templates&#xff0c;然后选择Standard PLC Project&#xff0c;填写项目名称后点击添加 在PLC项目目录中右键GVLs&#xff0c;选择Add&#xff0c;添加Global Variable List&#xff08;全局变…...

Linux操作系统如何制作U盘启动盘

在麒麟系统中有一款U盘启动器软件&#xff0c;它是用于制作系统启动U盘的工具&#xff0c;方便无光驱的电脑安装操作系统&#xff0c;也可以反复使用一个U盘&#xff0c;避免光盘的浪费。下面对该U盘启动器使用方法做详细讲解。 1.准备需要安装的系统镜像文件。 图 1 2.准备1…...

如何防止SpringBoot中的jar反编译?解决相关报错及踩到的坑

目录 1. 面对的场景 2. 方案 2.1 使用代码混淆 2.2 JAR包加密 3. 项目操作 4. 启动方式 5. 踩到的各种坑 5.1 java -jar xxx-0.0.1-SNAPSHOT.jar 没有主清单属性 5.2 Caused by: java.lang.IllegalArgumentException: Unrecognized option: -pwdfxw-jar 1. 面对的场景…...

Axios 基本使用

Axios 是一个异步请求技术,核心作用就是用来在页面中发送异步请求,并获取对应数据在页面中渲染 页面局部更新技术 Ajax 中文网站:https://www.kancloud.cn/yunye/axios/234845 安装: <script src"https://unpkg.com/axios/dist/axios.min.js"></script&g…...

前端大佬都在用的actionDelegationMiddleware究竟有多香?

作为一个前端开发者,我深知跨组件通信的痛点。今天,我要和大家分享一个让我眼前一亮的工具 - alovajs 的 actionDelegationMiddleware。这个中间件简直就是跨组件通信的得力助手!它让我们可以在任意组件中触发其他组件的请求操作,解决了很多麻烦。用了它之后,我感觉整个项目的架…...

解决k8s集群中安装ks3.4.1开启日志失败问题

问题 安装kubesphere v3.4.1时&#xff0c;开启了日志功能&#xff0c;部署时有三个pod报错了 Failed to pull image “busybox:latest”: rpc error: code Unknown desc failed to pull and unpack image “docker.io/library/busybox:latest”: failed to copy: httpRead…...

Qml-Item的Id生效范围

Qml-Item的Id生效范围 前置声明 本实例在Qt6.5版本中做的验证同一个qml文件中&#xff0c;id是唯一的&#xff0c;即不同有两个相同id 的Item;当前qml文件中声明的id在当前文件中有效&#xff08;即如果其它组件中传入的id&#xff0c;与当前qml文件中id 相同&#xff0c;当前…...

【配色网站分享】

个人比较喜欢收藏一些好看的插画、UI设计图和配色&#xff0c;于是有了此篇&#xff0c;推荐一些配色网站&#xff0c;希望能对自己和大家有些帮助。 1.uiGradients 一个主打渐变风网站&#xff0c;还可以直接复制颜色。 左上角的“show all gradients”可以查看一些预设的渐…...

【记录】Android|安卓平板 猫游戏(四款,peppy cat,含下载教程和链接)

前言 网上大部分直接找到的都是 iPad 的猫游戏&#xff0c;安卓的要查英文才找得到&#xff0c;但质量也都一般&#xff0c;或不知道在哪里下载。 遂自己找。 下载测试时间&#xff1a;2024/10/20 文章目录 前言1 检索2 亲测2.1 ✅⭐⭐⭐⭐⭐Cat Alone 1 and 22.2 &#x1f4…...

微前端架构及其解决方案对比

微前端架构及其解决方案对比 微前端架构是一种通过将大型前端应用拆分为多个独立的、可单独部署的小型应用的设计模式。随着这种模式的流行&#xff0c;诞生了多种微前端实现方案&#xff0c;每个方案都有其独特的特点和适用场景。以下是常见的微前端解决方案及其优缺点对比&a…...

git add操作,文件数量太多卡咋办呢,

git add介绍 Git的add命令是用于将文件或目录添加到暂存区&#xff08;也就是索引库&#xff09;&#xff0c;以便在后续的提交&#xff08;commit&#xff09;操作中一并上传到版本库的。具体来说&#xff0c;git add命令有以下几种常见用法&#xff1a; 添加单个文件&#…...

搭建Golang gRPC环境:protoc、protoc-gen-go 和 protoc-gen-go-grpc 工具安装教程

参考文章&#xff1a; 安装protoc、protoc-gen-go、protoc-gen-go-grpc-CSDN博客 一、简单介绍 本文开发环境&#xff0c;均为 windows 环境&#xff0c;mac 环境其实也类似 ~ ① 编译proto文件&#xff0c;相关插件 简单介绍&#xff1a; protoc 是编译器&#xff0c;用于将…...

Spring Boot 核心理解-自动装配

自动装配 spring boot的自动装配&#xff08;auto configuration&#xff09;是通过spring framework的依赖注入&#xff08;dependency injection, DI&#xff09;和配置类的组合来实现的。 spring boot 的自动装配机制可以简化应用的配置过程&#xff0c;是开发者不再需要手…...

go 中指针的执行效率比较

package main import ("fmt""time" ) type Books struct {title stringauthor stringsubject stringbook_id int } func main() {start : time.Now() // 记录开始时间var Book1 Books /* 声明 Book1 为 Books 类型 */var Book2 Books /* 声明…...

别再手动配IP了!用NI-USRP Configuration Utility快速搞定USRP 2954与LabVIEW连接

告别手动配置&#xff1a;NI-USRP Configuration Utility 快速连接 USRP 2954 与 LabVIEW 全攻略 刚拿到 USRP 2954 设备时&#xff0c;许多工程师和研究人员的第一道坎往往不是复杂的信号处理算法&#xff0c;而是看似基础却令人头疼的网络配置问题。传统的手动 IP 配置方式不…...

DeepSeek-OCR-2算力优化部署:支持多GPU并行解析提升吞吐量方案

DeepSeek-OCR-2算力优化部署&#xff1a;支持多GPU并行解析提升吞吐量方案 1. 为什么需要多GPU并行解析&#xff1f; 如果你用过单张显卡跑DeepSeek-OCR-2&#xff0c;可能会遇到这样的场景&#xff1a;公司财务部门一次性发来50张发票扫描件&#xff0c;行政部需要处理100页…...

别再只会‘永不在此停止’了!实战绕过网站JS混淆与内存爆破的三种硬核方法

实战突破&#xff1a;三种硬核方法破解JS混淆与内存爆破 打开开发者工具的那一刻&#xff0c;页面突然卡死&#xff0c;控制台不断弹出debugger断点——这可能是每个爬虫工程师都经历过的噩梦。当简单的"永不在此停止"失效时&#xff0c;我们需要更高级的技术手段来应…...

用STM32F103和0.96寸OLED做个桌面电子宠物:从GIF动图到屏幕显示的完整流程

用STM32F103和0.96寸OLED打造智能桌面电子宠物&#xff1a;从动图处理到交互设计的完整指南 在嵌入式开发的世界里&#xff0c;没有什么比亲手打造一个会动的电子宠物更有成就感了。想象一下&#xff0c;你的桌面上有一个由0.96寸OLED屏幕和STM32F103微控制器驱动的小生命&…...

FoundationPress Webpack模块打包:深入理解现代WordPress主题JavaScript架构

FoundationPress Webpack模块打包&#xff1a;深入理解现代WordPress主题JavaScript架构 【免费下载链接】FoundationPress olefredrik/FoundationPress: 一个基于 WordPress 的主题框架&#xff0c;基于 Foundation 框架构建。适合用于开发 WordPress 主题&#xff0c;可以使用…...

Phi-4-mini-reasoning轻量模型选型指南:何时该用Phi-4-mini而非Qwen3

Phi-4-mini-reasoning轻量模型选型指南&#xff1a;何时该用Phi-4-mini而非Qwen3 1. 模型概述与核心优势 Phi-4-mini-reasoning是一个基于合成数据构建的轻量级开源模型&#xff0c;专注于高质量、密集推理的数据处理能力。作为Phi-4模型家族成员&#xff0c;它特别适合需要高…...

ADG实时同步失效的深层原因:从MRP0的WAIT_FOR_LOG状态看standby redolog设计要点

ADG实时同步失效的深层解析&#xff1a;从WAIT_FOR_LOG状态看SRL设计关键点 当Oracle Data Guard环境中MRP0进程陷入WAIT_FOR_LOG状态时&#xff0c;这就像高速公路上的应急车道被占用——整个容灾系统的实时同步能力将陷入瘫痪。本文将带您穿透现象看本质&#xff0c;从存储结…...

告别景深烦恼:用PyTorch+PyQt5打造你的专属多焦点图像融合桌面工具(附完整源码)

告别景深烦恼&#xff1a;用PyTorchPyQt5打造你的专属多焦点图像融合桌面工具 每次拍摄微距或静物时&#xff0c;是否总在景深和清晰度之间纠结&#xff1f;按下快门后才发现前景清晰时背景模糊&#xff0c;背景聚焦时前景又失焦。专业摄影师会告诉你&#xff1a;这是光学镜头的…...

电动汽车模型考虑多种需求响应及微网的虚拟电厂日前优化调度模型的MATLAB代码(含空调负荷)

MATLAB代码&#xff1a;含多种需求响应及电动汽车的微网/虚拟电厂日前优化调度 关键词&#xff1a;需求响应 空调负荷 电动汽车 微网优化调度 虚拟电厂调度 仿真平台&#xff1a;MATLABCPLEX 主要内容&#xff1a;代码主要做的是一个微网/虚拟电厂的日前优化调度模型&#…...

Java程序设计(第3版)第二章——变量的三种定义方式2和3

变量的第二种使用方式 在声明的同时并赋值 数据类型 变量名 &#xff1d; 数据; int b &#xff1d; 12; System.out.println(b); 输出为12变量的第三种使用方式 同时定义多个同类型变量 int c,d&#xff1d;1,e&#xff1d;11,f&#xff1d;23,g&#xff1d;32,h&#xff1d;0…...