【uniapp】小程序中修改Vant组件navbar左箭头的颜色及图标与背景

感觉自己封装的返回组件不太好用，于是尝试用一下Vant组件库里的 NavBar

【uniapp】小程序自定义一个通用的返回按钮组件_小付学代码的博客-CSDN博客_uniapp自定义返回按钮左边箭头，右边文字可以自定义，但是不要太长，太长可以自己改 .back的width值，改宽一点。用这个组件的时候首先要在pages.json里把导航栏变成自定义的：组件：backPages.vue使用的时候需要传按钮名：backtext = ‘返回或者自定义’需要import引入组件并注册components才行，示例代码：............https://blog.csdn.net/ONLYSRY/article/details/126178045?spm=1001.2014.3001.5502Vant Weapp - 轻量、可靠的小程序 UI 组件库轻量、可靠的小程序 UI 组件库https://vant-contrib.gitee.io/vant-weapp/#/nav-bar
发现没办法更改颜色，之前几个页面使用的都是黑色的，API里custom-style感觉有点靠谱，尝试了一下，没得成功。

在几篇博客里找到了解决办法：感觉有点麻烦，要是组件留一个属性参数直接修改就好了。

/* /deep/的意思大概为深入的 */
//修改文字颜色.van_top /deep/ .van-nav-bar__text{color: #000000;}
//修改箭头颜色.van_top /deep/ .van-icon-arrow-left{color: var(--nav-bar-icon-color, #000000) !important;}
//修改背景颜色.van_top /deep/ .van-nav-bar {background-color: #E40000;}

把#000黑色修改成你想用的颜色就可以了。以下为完整代码（如果使用scss可以多写一个style像我这样）：

<template><view><!-- 返回组件 --><view class="van_top"><van-nav-bar left-text="返回" left-arrow fixed @click-left="onClickLeft" /></view>xxxxxxxx</view>
</template><script>export default {data() {return {}},methods: {onClickLeft() {// uni.navigateBack({//  delta:2// })uni.switchTab({// url:'/pages/my/my'})},}}
</script><style>/* 修改组件的样式表 */.van_top /deep/ .van-nav-bar__text {color: #FFF;}.van_top /deep/ .van-icon-arrow-left {color: var(--nav-bar-icon-color, #FFF) !important;}.van_top /deep/ .van-nav-bar {background-color: #E40000;}</style><style lang="scss" scoped>/* 以下为自己的样式表 */
</style>

【uniapp】小程序中修改Vant组件navbar左箭头的颜色及图标与背景相关推荐

微信小程序中使用vant组件库（超详细）
目录前言 Vant Weapp的安装与使用 1.安装 node.js 2.通过 npm 安装 3.修改 app.json 4.修改 project.config.json 5.构建 npm 包 6. ...
微信小程序中引用vant组件库
步骤 1.vant组件库里面也有说明,它说package.json 和 node_modulles 必须在miniprogram目录下,可是一般你刚新建一个小程序项目的时候,是没有package.js ...
微信小程序中使用vant weapp 的dialog组件
微信小程序中使用vant weapp 的dialog组件官方文档路径:import Dialog from 'path/to/@vant/weapp/dist/dialog/dialog';,这不是 ...
关于微信小程序如何使用Vant组件
微信小程序如何使用Vant组件前言一.微信小程序自动查找第二种前言今天闲着没事,兴趣来了,想写写微信小程序,用原生的敲,因为懒得原因,不想再去封装一些组件库,就想当Vant,引用Vant真的 ...
html img 手势缩放,微信小程序中利用image组件实现图片手势缩放
微信小程序中利用image组件实现图片手势缩放,前端大神严灏的牛文,讲解了微信小程序中image组件的三种是缩放模式,三种之中,只有 aspectFit 模式可以等比例缩放图片,并显示完整的图片. 原 ...
手把手教你实现小程序中的自定义组件
之前做小程序开发的时候,对于开发来说比较头疼的莫过于自定义组件了,当时官方对这方面的文档也只是寥寥几句,一笔带过而已,所以写起来真的是非常非常痛苦!! 好在微信小程序的库从 1.6.3 开始,官方对于 ...
关于v-show与v-if的区别以及uni-app小程序中v-show指令失效问题
前言在 Vue 和 uni-app 的使用过程中,我们常使用到 v-show 与 v-if .但很多人在用时并不知道两者到底有什么区别,下面就由我来介绍下吧一.v-show v-show 是一个根 ...
微信小程序中使用Vant Weapp组件库
介绍 Vant 是一个轻量.可靠的移动端组件库,于 2017 年开源. 目前 Vant 官方提供了 Vue 2 版本.Vue 3 版本和微信小程序版本,并由社区团队维护 React 版本和支付宝小程序 ...
微信小程序怎么修改自定义组件中的样式
在微信小程序中我们经常要用到自定义组件,但是有时我们因为引用的地方不同可能组件的一些样式也要修改,比如颜色,高度,宽度等来适合不同的页面,有没有办法来修改自定义组件中的样式呢,很显然是有的,我们要用到 ...

【uniapp】小程序中修改Vant组件navbar左箭头的颜色及图标与背景

【uniapp】小程序中修改Vant组件navbar左箭头的颜色及图标与背景相关推荐

最新文章

热门文章