uniapp 微信小程序设置 tabBar 选中颜色不生效

最新推荐文章于 2024-10-07 09:14:17 发布
最新推荐文章于 2024-10-07 09:14:17 发布
阅读量831 收藏
点赞数
文章标签： 微信小程序 uni-app javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40900156/article/details/129358880
版权

uniapp 微信小程序设置 tabBar 选中颜色不生效

tabBar 设置

"tabBar": {
	"color": "#666",
	"fontSize": "12px",
	"borderStyle": "white",
	"selectedColor": "rgba(246, 176, 8, 1)",
...
}

H5 效果

在这里插入图片描述

微信小程序效果

在这里插入图片描述

uniapp 官方文档

在这里插入图片描述

正确的姿势

"tabBar": {
	"color": "#666",
	"fontSize": "12px",
	"borderStyle": "white",
	// rgba(246, 176, 8, 1) 对应的十六进制颜色码是 #f6b008
    "selectedColor": "#f6b008",
...
}

在这里插入图片描述

qq_40900156
关注
uniapp 微信小程序tabbar凸起的显示
08-25
在`uniapp`中处理微信小程序的tabbar凸起效果并确保其不闪烁，是一项技术性工作，涉及到CSS样式、事件处理以及可能的动画优化。 首先，我们需要了解微信小程序中的`tabbar`配置。在`app.json`文件中，我们可以定义...
uniapp在app中tabBar的文字不显示
qq_68937887的博客
10-18 861
因为在tabBar加了fontSize属性，用的是rpx单位，改成px重新运行就可以了，
小程序tabBar设置color和selectColor不生效
热门推荐
FrancisBingo的博客
12-28 1万+
tabBar介绍 如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。 属性 类型 必填 默认值 描述 color HexColor 是 tab 上的文字默认颜色，仅支持十六进制颜色 selectedColor ...
【解决uniapp小程序tabBar不显示或者无效的问题】
最新发布
weixin_52772457的博客
10-07 857
https://blog.csdn.net/qq_42339350/article/details/116591612?fromshare=blogdetail&sharetype=blogdetail&sharerId=116591612&sharerefer=PC&sharesource=weixin_52772457&sharefrom=from_link
前端学习（2347）：创建新页面和配置
歌谣的博客
10-04 828
pages.json { "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages { "path" : "pages/message/message", "style" : { "navigationBarTitleText": "信息页", "navigationBarBackgroundColor": "#7FFF00", "h5":{ ..
font-size 设置字体不生效解决方案（小于12px）
聆听。。花开雨落的博客
10-08 1095
原因是 Chrome 以及 Chromium 内核的浏览器在中文语言下最小字体只能是 12px，大部分浏览器都是如此,所以小于12px字体不会在变小，而是保持12px的大小。使用 font-size 设置小于 12px 的字体时，发现并不生效（字体不会再缩小了）。
微信小程序tabBar 返回tabBar不刷新页面
10-16
总的来说，微信小程序中处理`tabBar`页面不刷新的问题，关键在于利用生命周期函数和本地存储进行状态跟踪。上述方案提供了一种实践方法，但实际应用中可能需要根据具体业务需求进行相应的调整。理解并灵活运用生命...
uniapp小程序自定义动态tabbar
04-08
微信、支付宝、百度等小程序平台都提供了预设的TabBar样式，但往往不能满足所有设计需求，因此自定义动态TabBar成为了解决这一问题的关键。 3. 自定义TabBar的需求 - 动态内容：根据用户权限或业务状态动态改变...
微信小程序 自定义tabbar (源码)
05-31
微信小程序 自定义tabbar (源码)微信小程序 自定义tabbar (源码)微信小程序 自定义tabbar (源码)微信小程序 自定义tabbar (源码)微信小程序 自定义tabbar (源码)微信小程序 自定义tabbar (源码)微信小程序 自定义...
微信小程序自定义tabbar中间突起样式
04-20
在微信小程序中，`tabbar` 是一个基础且重要的组件，它通常位于页面底部，用于展示应用的主要功能模块，方便用户快速切换。本文将深入探讨如何在微信小程序中自定义`tabbar`，特别是实现中间突起的样式。 1. **...
uniapp的那些坑
哆来A梦没有口袋的博客
07-01 1万+
1.selectedColor不起作用 1.查看位置是否写对，与lis同级 2.是否为16进制，selectedColor写的rgb不支持 3.是否被其他样式覆盖，其他地方也设置过selectedColor，可以全局搜索一下 2.input框被输入键盘覆盖 如 ： input这些输入框，有一个自带的属性，可以设置键盘到输入框的距离 如： 设置样式后正常 3.有遮罩层时，禁止滚动...
uniapp中table表格设置宽度无效的原因及解决办法
qq_43205326的博客
08-31 1万+
表格为什么设置宽度失效，一文解决为什么。
uni-app(踩坑第二篇):iconfont使用font-size失效(已解决)
qq_68575975的博客
10-29 1810
当中自己的vue文件中想要使用font-size改变字体图标的大小时失效。解决方法：把font-size给注释或删除掉就可以了。1.阿里矢量图标库使用。
uni-app中表格隔行异色
weixin_43972643的博客
07-07 1536
uni-app中表格隔行异色 组件名:nth-of-type(n) 属于其父元素的特定类型的第 n 个子元素的每个元素 ，n 可以是数字、关键字或者公式；odd 和 even 用于匹配下标是奇数或偶数的子元素的关键词（第一个子元素下标是1） ::v-deep .uni-table-tr:nth-of-type(2n){ background-color: #FFFFFF } ::v-deep .uni-table-tr { background-color: #
uniApp - tabbar的设置
Aan___的博客
12-12 1683
原生小程序的tabbar和uniApp里的tabbar绝大多数属性是一致的，但是uniApp里可能会有更多的属性设置。在 pages.json 页面，写一个 tabBar 属性，属性值是我们定义的 tabbar。
关于UNI-APP tabbar无法显示的坑
u011685213的博客
07-29 6799
uniapp上开发小程序的时候，查看了官网的文档配置设置tabbar，编译完全没问题，但是始终显示不出来，最后经过排查发现很诡异的问题，具体原理后续再问问吧。先上代码： { "pages": [{ "path": "pages/login/login", "style": {} }, { "path":"pages/index/index", "style":{ "navigationBarTi...
uniapp 多选的效果
小白前端
09-03 1183
uniapp 给我们提供了tabs组件进行单项的切换，但是多选的效果需要我们自己去手写。例如我们去选择自己感兴趣的职业，选中增加选中的背景色，点击选中的课程可以取消已经选中的课程： <template> <view class="wrap"> <block v-for="(item,index) in jobs" :key="index"> <view class="item" :class="{active:ids.includes(item.id
uniapp tabbar失效
leechoy
08-06 1960
第一、查看是否报错路径是否正确 第二、确保tabBar.list数组的第一项必须和pages配置中的第一项要相同
uniapp微信小程序自定义tabbar
08-24
对于uniapp微信小程序，你可以通过自定义组件来实现自定义tabbar。以下是一种实现方法： 1. 在 uniapp 项目中创建一个新的自定义组件，例如 "custom-tabbar"。 2. 在 custom-tabbar 组件的文件夹中，创建一个 JSON 文件，命名为 "custom-tabbar.json"。在该文件中定义组件使用的自定义属性，例如： ```json { "component": true, "usingComponents": {} } ``` 3. 在 custom-tabbar 组件的文件夹中，创建一个 WXML 文件，命名为 "custom-tabbar.wxml"。在该文件中编写自定义tabbar的布局，例如： ```html <view class="custom-tabbar"> <!-- 自定义的tabbar按钮 --> <view class="custom-tabbar-item" bindtap="navigateToPage"> <!-- 按钮图标 --> <image src="{{ activeIndex === 0 ? 'icon1-active' : 'icon1' }}"></image> <!-- 按钮文字 --> <text class="{{ activeIndex === 0 ? 'active' : '' }}">Tab1</text> </view> <view class="custom-tabbar-item" bindtap="navigateToPage"> <!-- 按钮图标 --> <image src="{{ activeIndex === 1 ? 'icon2-active' : 'icon2' }}"></image> <!-- 按钮文字 --> <text class="{{ activeIndex === 1 ? 'active' : '' }}">Tab2</text> </view> <!-- 更多按钮 --> <view class="custom-tabbar-item more" bindtap="showMoreOptions"> <!-- 更多按钮图标 --> <image src="more-icon"></image> </view> </view> ``` 4. 在 custom-tabbar 组件的文件夹中，创建一个 WXSS 文件，命名为 "custom-tabbar.wxss"。在该文件中编写自定义tabbar的样式，例如： ```css .custom-tabbar { display: flex; align-items: center; height: 50px; background-color: #fff; } .custom-tabbar-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; } .custom-tabbar-item image { width: 30px; height: 30px; } .custom-tabbar-item text { font-size: 12px; margin-top: 5px; } .custom-tabbar-item.more { position: relative; } .custom-tabbar-item.more image { width: 40px; height: 40px; } .active { color: #007aff; } ``` 5. 在需要使用自定义tabbar的页面中，引入 custom-tabbar 组件，例如： ```html <template> <view> <!-- 页面内容 --> </view> <!-- 引入自定义tabbar组件 --> <custom-tabbar></custom-tabbar> </template> <script> import customTabbar from '@/components/custom-tabbar/custom-tabbar' export default { components: { customTabbar }, // 页面逻辑代码 } </script> <style> /* 页面样式 */ </style> ``` 通过以上步骤，你就可以在uniapp微信小程序中实现自定义tabbar了。你可以根据自己的需求修改自定义tabbar的布局和样式，以及处理相应的点击事件。希望能对你有所帮助！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值