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

news2024/10/23 21:43:45

最近使用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.coloradmin.cn/o/2221889.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

深入剖析 C 与 C++ 动态内存管理之术

亲爱的读者朋友们&#x1f603;&#xff0c;此文开启知识盛宴与思想碰撞&#x1f389;。 快来参与讨论&#x1f4ac;&#xff0c;点赞&#x1f44d;、收藏⭐、分享&#x1f970;&#xff0c;共创活力社区。 &#x1f525;&#x1f525;&#x1f525;【C】进阶&#xff1a;类相关…

Java 二分查找算法详解及通用实现模板案例示范

1. 引言 二分查找&#xff08;Binary Search&#xff09;是一种常见的搜索算法&#xff0c;专门用于在有序数组或列表中查找元素的位置。它通过每次将搜索空间缩小一半&#xff0c;从而极大地提高了查找效率。相比于线性查找算法&#xff0c;二分查找的时间复杂度为 O(log n)&…

利用Docker搭建一套Mycat2+MySQL8一主一从、读写分离的最简单集群(保姆教程)

文章目录 1、Mycat介绍1.1、mycat简介1.2、mycat重要概念1.3、Mycat1.x与Mycat2功能对比1.2、主从复制原理 2、前提准备3、集群规划4、安装和配置mysql主从复制4.1、master节点安装mysql8容器4.2、slave节点安装mysql8容器4.2、配置主从复制4.3、测试主从复制配置 5、安装mycat…

【TDA】持续同调的矢量化方法

Topological deep learning: a review of an emerging paradigm 持续同调与深度学习协同下的3D点云分类_苏潇 Applications of Topology to Data Analysis Computational Topology: An Introduction 持续同调对于特征的方式有条形码PB和持续图表PD两种形式,它们包含了持续同调的…

Qt开发技巧(十八):新窗口控件用智能指针,将一些配置类变量封装起来,Qt窗体的Z序叠放,子窗体的释放,Qt中的事件发送,Qt的全局头文件

继续讲一些Qt开发中的技巧操作&#xff1a; 1.新窗口控件用智能指针 通过对Qt自带Examples的源码研究你会发现&#xff0c;越往后的版本&#xff0c;越喜欢用智能指针QScopedPointer来定义对象&#xff0c;这样有个好处就是用的地方只管new就行&#xff0c;一直new下去&#xf…

2025 年最佳的 Retool 开源替代方案

自 2017 年推出以来&#xff0c;Retool 已迅速成为开发者的热门选择。 Retool 的出现&#xff0c;填补了当时企业在快速构建内部工具上的空白。传统的应用开发往往需要耗费大量时间和资源&#xff0c;尤其是对于定制的内部业务应用。而 Retool 提供了一个灵活的平台&#xff0…

element设置时间和日期框早于现在的时间和日期禁用

效果: 今日此时此刻之前的日期、时间禁止选用&#xff0c;切换日期和时间为“2024-10-19 00:00:00"&#xff0c;再切换为”2024-10-18 00:00:00"时&#xff0c; 会给form.time默认赋值为今日此时此刻&#xff08;日期时间少于今日此时此刻则重新赋值&#xff09; 安…

datax连接池泄漏问题排查及解决

1、问题描述 频繁调用datax服务&#xff08;从oracle同步到mysql&#xff09;出现报错&#xff0c;获取不到连接 oracle读取时报错信息 "errorMessage": "Code:[DBUtilErrorCode-10], Description:[连接数据库失败. 请检查您的 账号、密码、数据库名称、IP、…

print_hex_dump调试内核,嘎嘎香

本文首发于我的公众号 皮塞作坊 专注于干货分享&#xff0c;号欢迎大家关注,二维码文末可以扫。 公众号: 使用print_hex_dump调试内核/驱动&#xff0c;太香了 最近在验证芯片功能的过程中发现了一个好用的内核调试接口&#xff0c;print_hex_dump&#xff0c;除了直接打印16…

【AIGC】关键词智能匹配:AI驱动的RAG知识库检索技术全解析

随着大语言模型的快速发展&#xff0c;AI在知识获取和生成中的应用越发广泛。RAG&#xff08;Retrieval-Augmented Generation&#xff09;模型通过结合外部知识库&#xff0c;提升了生成文本的质量与准确性&#xff0c;而关键词搜索是其关键组成部分。本文将深入探讨AI如何通过…

【java】数组(超详细总结)

目录 一.一维数组的定义 1.创建数组 2.初始化数组 二.数组的使用 1.访问数组 2.遍历数组 3.修改数据内容 三.有关数组方法的使用 1.toString 2. copyOf 四.查找数组中的元素 1.顺序查找 2.二分查找binarySearch 五.数组排序 1.冒泡排序 2.排序方法sort 六.数组逆置…

LabVIEW伺服压机是如何实现压力位移的精度?

LabVIEW伺服压机通过精确的压力和位移控制&#xff0c;实现了高精度的压装操作。为了达到这种精度&#xff0c;系统通常依赖于多个硬件和软件模块的协同工作&#xff0c;包括伺服电机、压力传感器、位移传感器以及LabVIEW的实时控制和数据处理功能。以下是LabVIEW伺服压机如何实…

Linux修改npm的镜像源为淘宝镜像

起因&#xff1a;使用官方镜像源下载软件包速度太慢 1.查看npm当前镜像源命令 npm get registry 执行结果 2.还原为官方镜像源命令 npm config set registry https://registry.npmjs.org/ 3.修改为淘宝镜像命令 npm config set registry https://registry.npmmirror.com …

【你也能从零基础学会网站开发】 SQL Server结构化查询语言数据操作应用--DML篇 delete语句数据删除操作的使用方法

&#x1f680; 个人主页 极客小俊 ✍&#x1f3fb; 作者简介&#xff1a;程序猿、设计师、技术分享 &#x1f40b; 希望大家多多支持, 我们一起学习和进步&#xff01; &#x1f3c5; 欢迎评论 ❤️点赞&#x1f4ac;评论 &#x1f4c2;收藏 &#x1f4c2;加关注 delete介绍与语…

关于武汉芯景科技有限公司的限流开关芯片XJ6288开发指南(兼容SY6288)

一、芯片引脚介绍 1.芯片引脚 二、系统结构图 三、功能描述 1.EN引脚控制IN和OUT引脚的通断 2.OCB引脚指示状态 3.过流自动断开

NC 单据模板自定义项 设置参照,比如部门参照、自定义参照等

NC 单据模板自定义项 设置参照&#xff08;自定义参照&#xff09; 一、如图下图&#xff0c;NC 单据模板自定义项 设置自定义参照&#xff1a; 1、选择需要设置参照的自定义字段&#xff0c;选择高级属性页签&#xff0c;在类型设置中&#xff0c;数据类型选择参照信息&#…

使用JUC包的AtomicXxxFieldUpdater实现更新的原子性

写在前面 本文一起来看下使用JUC包的AtomicXxxxFieldUpdater实现更新的原子性。代码位置如下&#xff1a; 当前有针对int&#xff0c;long&#xff0c;ref三种类型的支持。如果你需要其他类型的支持的话&#xff0c;也可以照葫芦画瓢。 1&#xff1a;例子 1.1&#xff1a;普…

Maven的进阶

目录 一、pom.xml文件 二、坐标 2.1 坐标的概念 2.2 坐标的意义 2.3 坐标的含义 2.4 在IDEA中查看项目的坐标 三、依赖 3.1 依赖的意义 3.2 依赖的使用 3.3 第三方依赖的查找使用方法 3.4 依赖的范围 3.5 依赖传递和可选依赖 3.5.1 依赖传递 3.5.2 依赖范围对传…

【前端】如何制作自己的网站(7)

以下内容接上文。 结合图片的超链接 将img元素作为内容&#xff0c;放在a元素中。即可为图片添加一个超链接。 例如右边的代码&#xff0c;点击头像就会打开“aboutme.html“。 点击右边的图片试试&#xff5e; 两个非文本元素——图片与超链接。 从现在开始&#xff0…

蘑菇书(EasyRL)学习笔记(1)

1、强化学习概述 强化学习&#xff08;reinforcement learning&#xff0c;RL&#xff09;讨论的问题是智能体&#xff08;agent&#xff09;怎么在复杂、不确定的环 境&#xff08;environment&#xff09;里面去最大化它能获得的奖励。如下图所示&#xff0c;强化学习…