uniapp修改uni-ui组件样式(对微信小程序/H5有效，vue3）

2024/10/25 18:29:49 来源：https://blog.csdn.net/m0_37570176/article/details/142632654 浏览: 次关键词：uniapp修改uni-ui组件样式(对微信小程序/H5有效，vue3）

寻找要修改的样式

使用开发者工具找到具体要修改的class类名
在这里插入图片描述

修改

<style lang="scss">//.nav为上一级的class.nav::v-deep .uni-navbar--border {border-bottom-style: none !important;}
</style>

完整代码

<template><view><uni-nav-bar :fixed="true" dark background-color="#007AFF" title="安贞心康" class="nav" /><image src="/static/images/myimages/temp/home.jpg" mode="widthFix" style="width:100%;"></image></view>
</template><script>export default {data() {return {}},onLoad() {//uni.hideNavigationBar();},onShow() {uni.setNavigationBarTitle({title: 'home'})},methods: {}}
</script><style lang="scss">//.nav为上一级的class.nav::v-deep .uni-navbar--border {border-bottom-style: none !important;}
</style>