关于uniApp自定义配置的底部的tabBar配略解, 以及会遇到的bug若干

8月前作者：zhe_yi_kai 分类：Toy博客阅读(32) 违法举报

这篇具有很好参考价值的文章主要介绍了关于uniApp自定义配置的底部的tabBar配略解, 以及会遇到的bug若干。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

首先, 想要自定义tabBar 有两种方法, 可以自己去编写一个tabBar导航栏, 但是性能不会比原生高, 第二种, 使用 uni.setTabBarItem

uni.settabbaritem pagepath,前端,css3,css,uni-app

这是配置项, 有两个注意点, pagePath的路径配置和pages.json有所不同, 需要加上代表绝对路径的 / 如下

uni.settabbaritem pagepath,前端,css3,css,uni-app

,

index代表需要替换的tabBar数组位置, 其余配置一样, viseble 属性控制tabBar显示隐藏, 一般用来隐藏原配置中多余的tabbar

第一个小bug是使用该方法的时机, 这个方法只有在tabBar配置列的页面进行配置时才会生效, 也就是你跳转进入的第一个tabBar页面中进行你需要更换的选项, 也就是首页

uni.settabbaritem pagepath,前端,css3,css,uni-app

注意, switchTab跳转的页面必须在pages.JSON 的tabBar list数组中有对应页面的配置项

最后是在跳转的首页(tabBar页面)中, 进行配置调用uni.setTabBarItem 方法

uni.settabbaritem pagepath,前端,css3,css,uni-app

js

复制代码

// arrToTab是一个简单的遍历函数 export const arrToTab = (arr) =>{ arr.forEach(it => { uni.setTabBarItem(it) }) }

效果图如下

uni.settabbaritem pagepath,前端,css3,css,uni-app

uni.settabbaritem pagepath,前端,css3,css,uni-app 文章来源地址https://www.toymoban.com/news/detail-762847.html

到了这里，关于关于uniApp自定义配置的底部的tabBar配略解, 以及会遇到的bug若干的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：

领支付宝红包赞助服务器费用

uniapp - [ H5 网页 / App ] 高性能 tabbar 底部菜单凸起效果，原生系统自定义底部菜单不卡顿、切换页面不闪烁、自动缓存页面（底部菜单中间自定义一个图片并悬浮起来）

网上有很多自定义 tabbar 底部菜单的教程，但终归是组件形式，避免不了切换页面卡顿、闪屏闪烁、各平台不兼容等一系列问题。本文基于 uniapp 系统原生 tabbar 底部菜单，植入一个向上凸起的 “图片” 菜单，并支持点击触发事件，您可以直接复制代码，换个中间凸起的菜

2024年02月21日
浏览(40)
一文读懂uniapp中的tabBar底部导航

UniApp 中的 tabBar 是用来在应用程序底部显示可切换的选项卡的组件，通常用于实现底部导航栏允许用户通过点击不同的选项卡来切换应用程序的不同页面或功能模块其代码如下：对应的组件属性如下： list ： tabBar 的列表，每个选项卡都包含了图标、文字和对应的页面路径

2024年04月25日
浏览(21)
uniapp小程序底部tabbar图标大小设置

在uniapp中小程序的tabbar没有设置图标大小的属性，导致小程序在不同平台打开时图标大小显示的不一样，特别是在电脑微信打开小程序时，底部的图标就会特别大，使得页面看起来怪怪的，如下图：第一张是pc端H5，第二张是微信开发者工具(与手机端效果一样)、第三张电脑微

2024年02月11日
浏览(39)
微信小程序底部tabbar自定义实现凸起+透明底部效果

先上图看效果：步骤： 1、在文件根目录下创建一个文件夹：custom-tab-bar并分别创建 (js，json,wxml,wxss）类型文件 2、在pages.json中设置tabbar中的custom为true(true自定义，false默认系统) 3、index.js代码如下：

2024年02月09日
浏览(43)
Uniapp根据权限（角色）不同动态展示底部tabbar

比如绑定openId展示的tabbar为：首页、巡检、工单未绑定openId展示的tabbar为：在线报修、我的报修首页配置pages.json中的tabbar：这里只用配置pagePath就可以了~ 具体代码如下：创建一个自定义的tabbar文件：具体代码如下：注意：pagePath的最前面要加 / 创建index.js文件配置

2024年04月26日
浏览(39)
微信小程序——自定义底部tabBar

目录实现步骤 1、配置信息 2、添加代码文件。 3、在该目录下编写代码即可。二、在app.json里面添加tabBar配置三.、在custom-tab-bar添加配置 1. 在custom-tab-bar创建如下目录 2.给index.wxml添加tabBar的结构代码 3. 给index.js 添加数据配置和事件方法 4. 给index.wxss 添加样式四、

2024年02月16日
浏览(40)
uniapp h5 tabBar兼容IOS手机底部黑线

uniapp自定义tabBar方案一、pages.json文件中添加tarBar 二、把原生的tabBar隐藏起来三、自定义一个tabBar组件 //重点代码 height: 50px; padding-bottom: env(safe-area-inset-bottom); // 适配iphoneX的底部 padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS11.2*/ 四、

2024年02月09日
浏览(51)
uniapp 实现不同用户展示不同的tabbar(底部导航栏)

目录一、背景源码地址：包含vue2和vue3版本：cheinlu/tabBar_demo_vue 二、效果展示三、前置工作四、创建tabbar组件五、登录页面根据不同身份进行tabbar切换逻辑六、问题拓展最近在做一个uniapp开发的小程序遇到一个需求，希望不同用户登录后展示不同的tabbar页面，但是uniapp项

2024年02月08日
浏览(37)
微信小程序自定义底部菜单设计，固定在底部，并非使用tabBar设计

1.微信小程序自定义底部菜单设计，并且固定在底部，并非tabBar设计场景：比如加载详情页时：底部需要加入购物车、收藏、返回主页等设计效果图：点击事件发生 xx.wxml 样式设计xx.wxss js设计xx.js

2024年02月16日
浏览(37)
微信小程序自定义底部 tabbar （中间凸起）

在与 pages 文件夹同级的地方新建 custom-tab-bar 文件夹，并新建 index.wxml 、index.wxss 、index.js 、index.json 四个文件夹注意路径！！！复制后会报错，把图片和页面路径改掉就好了！！！提示：不要无脑复制，复制到自己的项目中后记得更改图片、页面路径！！！如需自定义头

2024年02月20日
浏览(36)