uniapp微信小程序使用ucharts遮挡自定义tabbar的最佳解决方案

于 2024-10-01 09:49:35 发布
阅读量112 收藏
点赞数 6
文章标签： uni-app 微信小程序 小程序 ucharts echarts
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_59685936/article/details/142547112
版权

如图所示：

使用的ucharts遮挡住了我自定义的tabbar（如果不是提需求的有病，我才不会去自定义tabbar）

2a69c03fe2c64bd5a47baf5bbc768243.png

 

 查阅了不少文档，说是开启  ucharts  的  canvas2d 即可：

584f3565343b4b6a947b37f262ff0712.png

官网文档地址：

uCharts官网 - 秋云uCharts跨平台图表库

后来的确是  IDE  显示的还是有问题的：

bd7d6b5b16e845808ec1f30735bf1d0c.png

但是真机调试、预览、包括上线都是有效的：

 

9dd5ecf9086f49c1b8c04e3f070f8ffd.png

 

 不过  uniapp  已经上线了兼容性比较好的  echarts  了，还是建议使用  echarts！！！

 

某公司摸鱼前端
关注
uniapp 微信小程序自定义底部tabbar
这里是痞子Monkey的博客
10-09 2299
pages.json中的tabbar照常写； 然后在app.vue中的onLaunch方法中隐藏原生的tabbar： uni.hideTabBar() 创建tabbar组件，components = > tabbar.vue 组件内容就是你要自定义的样式信息，如图： 组件代码： <template> <view class="tabbar" :style="{'padding-bottom': paddingBottomHeight + 'rpx'}...
uniapp 微信小程序tabbar凸起的显示
08-25
`uniapp`是一个跨平台的开发框架，它允许开发者使用一套代码库来构建多端应用，包括微信小程序。在`uniapp`中处理微信小程序的tabbar凸起效果并确保其不闪烁，是一项技术性工作，涉及到CSS样式、事件处理以及可能的...
【uniapp】开发微信小程序自定义底部tabbar
韩旭不会敲代码吧的博客
04-19 9004
uniapp开发微信小程序自定义底部tabbar
uniapp 自定义微信小程序 tabBar 导航栏
sinat_35272898的博客
09-03 2280
使用微信小程序 custom-tab-bar 自定义 tabBar 导航栏的主要实现过程
uni微信小程序自定义tabBar
m0_67574906的博客
07-22 1239
根据自己的业务需求去进行变更导航栏的样式，当然也可以采用不删除 page.json 中的 tabBar 的方案，只是把 TabBar 当个组件，先在 App.vue 中的 onLaunch 中使用 uni.hideTabBar(OBJECT) 去隐藏 tabBar，然后再每个页面中引用 TabBar 组件，也是可以实现该功能的
uniapp - 微信小程序 - 自定义底部tabbar
pig_ning的博客
06-26 500
uniapp - 微信小程序 - 自定义底部tabbar
uniapp 微信小程序使用uview u-tabbar组件自定义tabbar
weixin_50071483的博客
10-30 9820
uniapp 微信小程序使用uview u-tabbar组件自定义tabbar
微信小程序中使用 TDesign 自定义 TabBar
阳光总在风雨后丶
03-26 4211
微信小程序中使用 TDesign 自定义 TabBar （其他 ui 库同理）
uniapp微信小程序自定义tabbar决解切换闪烁，图标闪烁
曳猫的博客
06-11 3202
uniapp自定义小程序tabbat，解决tabbat闪烁，图标闪烁
uin-app微信小程序自定义tabBar底部菜单实现简单示例（工作笔记）
Java000I的博客
07-11 1036
在项目的根目录下创建一个名为的文件夹，并在其中创建所需的文件（如index.jsindex.jsonindex.wxmlindex.wxss在app.js中引入并使用自定义的 tabBar 组件。App({// 在这里可以执行一些启动时的逻辑},'不同角色，控制查看底部菜单权限实现效果1：实体店![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/2ca6098eefaf4d55935d9eb8d44116fb.png)实现效果2：回收公司!
uniapp小程序自定义动态tabbar
04-08
微信、支付宝、百度等小程序平台都提供了预设的TabBar样式，但往往不能满足所有设计需求，因此自定义动态TabBar成为了解决这一问题的关键。 3. 自定义TabBar的需求 - 动态内容：根据用户权限或业务状态动态改变...
微信小程序源码（含截图）自定义tabbar
05-19
微信小程序源码（含截图）自定义tabbar微信小程序源码（含截图）自定义tabbar微信小程序源码（含截图）自定义tabbar微信小程序源码（含截图）自定义tabbar微信小程序源码（含截图）自定义tabbar微信小程序源码（含...
微信小程序官方动态自定义底部tabBar的例子
10-16
微信小程序官方动态自定义底部tabBar是一种实现动态切换底部导航菜单的方式，它可以根据用户的实际需求，实现更加灵活和个性化的底部tabBar展示效果。本文将详细介绍微信小程序官方提供的动态自定义底部tabBar的实现...
微信小程序源码模版_自定义tabbar.rar
06-10
本资源“微信小程序源码模版_自定义tabbar.rar”是针对微信小程序的一个模板，其中包含了自定义底部导航栏（tabbar）的设计与实现。 在微信小程序开发中，TabBar 是应用页面常用的一种布局组件，它通常位于页面底部...
uniapp 常用高度状态栏，导航栏，tab栏，底部安全高度
最新发布
CZDBGSY的博客
09-26 430
uniapp 常用高度状态栏，导航栏，tab栏，底部安全高度。
uniapp生物识别示例（人脸识别、指纹识别）
weixin_59685936的博客
09-25 900
uniapp生物识别示例（人脸识别、指纹识别）
uniapp APP自动更新组件
luck332的专栏
09-25 759
在uniapp中实现APP自动更新功能，主要涉及到客户端和服务器端的协同工作。
uni-app进度条
ctf_0226的博客
09-24 718
【代码】uni-app进度条。
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
发出的红包

打赏作者

某公司摸鱼前端

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值