首页 > 编程语言 >vue3 && uni-app 中小程序实现 底部tabbar 中间凸起部分 或者说自定义底部tabbar [保姆级别教程]

vue3 && uni-app 中小程序实现 底部tabbar 中间凸起部分 或者说自定义底部tabbar [保姆级别教程]

时间:2024-06-01 18:59:15浏览次数:26  
标签:自定义 程序实现 json 添加 底部 tabbar 组件

1、先来看一下效果

2、代码实现  我们还是在 pages.json  中正常配置我们底部的tabbar 但是需要 添加一个字段 "custom": true, //开启自定义tabBar  不填每次原来的tabbar在重新加载时都回闪现

3、 在 pages同一级 或者 里面创建一个 子组件 用来放我们的模版 

4、 在 main.js中添加导入组件的配置 

5、在需要用到底部tabbar的页面中引入组件

6、运行起来后可能会报一个错误 这时候我们需要在 project.config.json 文件中的 setting 中添加两个字段的配置

7、添加配置

8、重新运行一下就可以了 样式大家自己调整 

标签:自定义,程序实现,json,添加,底部,tabbar,组件
From: https://blog.csdn.net/qq_52602294/article/details/139219684

相关文章

  • 容器组件Tabs如何自定义 tabBar-高亮切换
    1.TabBar如果放在底部的话,一般会显示图形和文字,甚至有特殊的图标,如果要实现此类效果,就需要自定义tabBarTabs(){TabContent(){//内容略}.tabBar(this.tabBarBuilder())}@BuildertabBarBuilder(){//自定义的Tabbar结构}2.自定义TabBa......
  • react 组件表格固定底部
    在React中,要实现一个组件表格并且固定底部,可以使用CSS的固定定位或绝对定位来实现。以下是一个简单的例子:importReactfrom'react';import'./App.css';functionApp(){return(<divclassName="App"><divclassName="table-container">......
  • uniapp App去除iOS底部安全区域白边
    未设置的情况下,iOS底部安全区域白边如图:去除方法: 在 mainfest.json 中加入一下代码:"safearea":{"bottom":{"offset":"none"}},去除效果展示:......
  • Viso的对象图形复制到word,发现图形画布底部有大量空白,如何解决
    1viso对象插入到wordVIso的图可以作为对象插入到word中,直接复制即可,复制后,可以在word中双击,关联到viso中,进行更改,很方便。正常情况下,在viso中做好图形后,直接复制到word中即可,在word中双击,关联到viso中。如下图:偶尔会存在一些格式比例大小的问题,导致对象下面很多空白,如下图:2......
  • UITabBarController点击UITabBarItem 禁止跳转 iOS
    写在下面类里无效,切记classCJZFTabBarViewController:UITabBarController{} 需要写在appdelegate或者基类里,可以拦截tabbaritem是否被选中。选中了后,才会走  didSelect代理方法。 @interfaceBaseViewController()<UITabBarControllerDelegate>@end//判......
  • 文件IO完成libjpeg库的移植,并设计程序实现在LCD上的任意位置显示一张任意大小的jpg图
    文件IO:完成libjpeg库的移植,并设计程序实现在LCD上的任意位置显示一张任意大小的jpg图片,注意不要越界。1.库的移植1.下载需要移植的库的源码包,libjpeg库源码包在官网可以下载www.ijg.org2.解压压缩包,解压后找到自述文件README,打开README了解libjpeg库的使用规则!3.打开源码包......
  • PLC程序实现矩形波,三角波,正弦波
    这套程序本来是在Smart200上玩出来的,后来在PLC1200/PLC1500的环境下重写了PLC程序。换句话说,这要遵守程序里的算法公式,不管什么PLC都能做出这几种波形1.采样时间想要生成连续的波形图,本质就是在采样时间点上采集当前输出值,当采样点足够多的时候,在时间线上就形成了随时间变化的......
  • windows10 资源管理器 卡死 底部任务栏不显示程序 点击底部任务栏两次会重启资源管理
     故障存储段,类型0事件名称:AppHangB1响应:不可用CabID:0问题签名:P1:explorer.exeP2:10.0.19041.1266P3:418a6e83P4:a874P5:134217728P6: P7: P8: P9: P10: 附加文件:\\?\C:\ProgramData\Microsoft\Windows\WER\Temp\WERE85A.tmp.WERInternalMetadata.xml\\?......
  • HarmonyOS NEXT应用开发案例——自定义TabBar
    介绍本示例主要介绍了TabBar中间页面如何实现有一圈圆弧外轮廓以及TabBar页签被点击之后会改变图标显示,并有一小段动画效果。效果图预览使用说明:依次点击tabBar页面,除了社区图标之外,其它图标往上移动一小段距离。实现思路场景1:TabBar中间页面实现有一圈圆弧外轮廓将Imag......
  • 简单四则运算程序实现
    功能要求小学老师要每周给同学出300道四则运算练习题。–这个程序有很多种实现方式:C/C++C#/VB.net/JavaExcelUnixShellEmacs/Powershell/VbscriptPerlPython–两个运算符,100以内的数字,不需要写答案(实现)–需要检查答案是否正确,并且保证答案在0..100之间(实现)–尽可......