当前位置: 首页 > 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.mrgr.cn/news/54541.html

相关文章:

  • 未来智慧城市发展的四大引领方向
  • 提升SQL技能,掌握数据分析
  • 图像编辑大一统?多功能图像编辑框架Dedit:可基于图像、文本和掩码进行图像编辑。
  • 滚雪球学Redis[7.0讲]:Redis在Web应用中的会话管理:实现、优化与安全性!
  • 【从零开始的LeetCode-算法】884. 两句话中的不常见单词
  • 基于Multisim的汽车尾灯控制电路设计与仿真
  • d3dcompiler_43.dll丢失怎么修复?分享5种实用方法助轻松搞定
  • 有口才的从业者一定是位人才
  • Linux服务器安装SRAToolkit教程
  • 一通瞎写居然击败100%【力扣】【498-对角线遍历】【数组-C语言】
  • 文献分享: Vamana图算法以及面向SSD的DiskANN
  • 第五届机器学习与计算机应用国际学术会议(ICMLCA 2024)
  • Leetcode 1926. 迷宫中离入口最近的出口
  • 数据库产品中审计与日志(Auditing and Logging)的功能简介
  • 计算机指令系统,打个结~
  • 【电子电力】三相逆变器下垂控制单机并离网,并网预同步
  • XGO Rider:全球首创双轮足AI机器人,集成ChatGPT,实现智能互动
  • 基于SSM汽车零部件加工系统的设计
  • 28——循环结构之累加应用(配套练习后续更新~~~~~)
  • 使用 F5-TTS 生成指定人物的声音:一步步指南
  • 国产AI模型“Yi-Lightning”逆袭超越GPT-4!
  • 使用函数制作一个简易的计算机
  • Python学习的自我理解和想法(17)
  • 巴西税收政策及主要税收
  • 诺贝尔物理学奖与机器学习、神经网络:一场跨时代的融合与展望
  • 【YOLO目标检测道路破损检测数据集】共665张、已标注txt格式、有训练好的yolov5的模型