关于使用uview自定义tabbar问题记录

已于 2022-03-23 17:04:45 修改
阅读量3.5k 收藏
点赞数
分类专栏： 不懂就问系列 uniapp 文章标签： 前端
于 2021-09-22 14:22:24 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Admin_yws/article/details/120414134
版权
本文介绍如何在uniapp中解决自定义tabbar项重复点击问题。通过使用vuex记录当前tabbar所处页面的下标，避免重复点击时重新跳转。文中详细解释了配置pages.json中的tabBar字段及在各个页面引入u-tabbar组件的方法。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

问题描述：
1.tabbar的项可重复点击，想实现点击当前项时，不触发重新跳转。
在uniapp中的自定义tabbar，是以组件形式引入各个页面，每个页面的tabbar都是独立的，没有统一的状态来管理tabbar是否执行重新跳转。问题找到了，使用vuex来记录当前tabbar处于页面的下标，加以判断即可实现项重复点击问题。

在pages.json中正常定义tabbar逻辑和字段，只需配置tabBar字段list中的pagePath(需以"/"开头)属性即可
在各个tabbar页面引入u-tabbar组件，组件会默认自动通过uni.hideTabBar()隐藏系统tabbar
通过vuex引用同一份tabbar组件的list参数，这样可以做到修改某一个页面的u-tabbar数据，其他页面的u-tabbar也能同步更新
组件内部会自动处理各种跳转的逻辑，同时需要注意以下两点：
要在list参数中配置pagePath路径，此路径为pages.json中定义的tabbar字段的路径

uniapp+uView自定义底部tabBer
YiQieWeiLeGengHa的博客
02-16 2253
uniapp+uView实现自定义tabber
uView（Tabbar 底部导航栏）
brhhh_sehe的博客
02-23 4207
（一）第一种方式 1，每个菜单页面都要 “首页” “发布” “我的” 每个页面都要 <template> <view> 首页 <u-tabbar :list="tabBar" @change="changeEvent()" bg-color="rgb(51, 61, 73)" active-color="rgba(8,141,246, 1)" inactive-color="#fff"> </u-tabbar> <
使用Uview自定义底部导航栏(tabbar),出现凹凸的效果
最新发布
2402_85814560的博客
03-02 803
1.首先我创建了一个tabbar的文件来放这些代码,将其封装成一个组件2.将value的值定义了一下3.将@change方法写在了方法里面,并加上了,将遍历出来的路由地址,保存下来,并使用switchTab,来跳转tabbar页面4.将pages.json里面,原本tabbar中的list,并加上了id(这一步可以不写),作为数据去遍历它5.写了一个关于class的三元表达式利用id判断,当然也可以使用地址判断,我觉得id简单一些,,因为我想其中一个的图片变大有凹凸之类的变形。
使用uView根据权限动态配置uni-app中的tabBar
热门推荐
FuyuumiAI的博客
11-21 1万+
文章目录前言一、uView是什么？二、安装与配置三、使用步骤1、创建tabBar对应的页面文件2、配置page.json中的tabBar属性总结 前言 在构建uni-app项目的时候，发现本身自带的tabBar属性无法很好的做到根据权限动态进行配置，好巧不巧，我发现了我使用的UI框架uView可以使用vuex配置tabBar参数，于是心生一计，最终实验过后可行，于是便将其记录下来，供大家参考。 一、uView是什么？ uView是uni-app生态专用的UI框架，是一个开源、免费的优秀框架。 二、安装与
【小程序系列】使用uView 自定义配置uni-app原生中的tabBar
Write less，do more
07-05 5286
一、uView是什么？ uView是uni-app生态专用的UI框架，是一个开源、免费的优秀框架。 二、安装与配置 官方文档讲的很详细，所以这里就直接引用：安装与配置 三、使用步骤 在完成第二步，并成功引入后，进行如下步骤： 1、创建tabBar对应的页面文件 2、配置page.json中的tabBar属性 需要注意的是，这里仅需配置tabBar中list属性中各页面的路径，如下图所示： 这里要注意了，和官方文档不一样，但确实是不需要加/ 因为我在实测过后发现加/是无效的，在去掉/后
uniapp结合uView自定义tabbar
weixin_46324536的博客
12-19 2233
只需要在app.vue中添加以下代码即可隐藏原生tabbar。注：app可能会导致原生tabbar占位问题，如下图所示。封装tabbar.vue。pages.json 中配置。index.vue中引用。
uniapp小程序uView自定义tabbar
sinat_23336093的博客
02-27 2919
uniapp小程序引入uView框架使用tabbar组件
3.使用uView让tabbar更优雅
KelvinLiu
05-13 2142
uniapp项目，使用uView让tabbar更优化更好看
uniapp+uView2.0实现自定义动态tabbar
weixin_43401380的博客
03-04 5587
uniapp+uView2.0实现自定义动态tabbar
手拉手带你实现基于Uniapp和uView，根据权限动态的修改底部菜单tabbar
07-08
- 接着，创建一个自定义tabbar组件，利用`props`或`vuex`获取用户权限。 - 在自定义组件中，使用`v-if`或`v-show`根据权限决定tab项的可见性。 - 最后，配置`pages.json`，确保路由跳转和权限控制一致。 6. ** ...
uview1.x自定义tabbar
xiaoququ的博客
08-24 1万+
在pages.json中正常定义tabbar逻辑和字段， 只需配置tabBar字段list中的pagePath属性即可 "list": [{ "pagePath": "pages/tabBar/Home/home" // "text": "首页", // "iconPath": "static/img/Home.png", // "selectedIconPath": "static/img/Home-select.png" }, { "pagePa.
uniapp 自定义底部tabbar 点两下 会闪烁问题
guoqing的博客
04-08 4959
在做自定义tabbar时，遇到了个问题，第一次切换tab，底部操作栏会明显的感觉闪烁，并且选中状态还会有抖动现象出现 这里在网上找到几个解决方法汇总一下 1、在tab页的onShow生命周期写了切换选中状态后，tab组件那边的切换就没必要再加setData去修改选择的状态了，可以直接注释掉 tab组件的`wxml`文件中 `cover-view` 和`cover-image` 分别替换为 `view` 和 `image`
uView自定义底部tabbar
starstarstarl的博客
07-20 3910
uni-app基于uView使用自定义底部导航
关于小程序TabBar跳转页面跟TabBar标签栏的icon不对应的分析（debug）
weixin_53052268的博客
08-02 807
在写代码时，出现wx.switchTab跳转页面后，但对应的TabBar栏目下的active的小图标却跟要跳转的页面不对应，查了资料是因为wx.switchTab跳转时不会刷新页面，导致数据和页面不同步。解决的办法是，将需要用到的数据全局共享，而不是仅仅定义在一个页面。...
tabbar图标切换 要点击两次才能有选中状态问题
梦否
03-04 6816
问题：tabbar图标切换 要点击两次才能有选中状态 原因：没有拷贝组件函数 官网中所给出的自定义组件地址：here 在 app.json 中添加： "tabBar": { "custom": true, "color": "#000000", "selectedColor": "#000000", "backgroundColor": "#000000", "list": [{ "pagePath": "page/component/index",
小程序uniapp uview自定义tabbar
m0_58373910的博客
06-11 588
小程序uniapp uview自定义tabbar
自定义TabBar 2 不需隐藏系统Tabbar
flg1554112450的博客
12-12 383
将自定义的button和label 添加到原有的Tabbar上 这样不需再考虑push时如何隐藏的问题，只要使用系统隐藏方法 首先看一下效果图 这种效果的实现 只需要首页 分类 发现我的 灰色切图一组，桔色切图一组，和拍摄按钮切图 白色背景不需切图 可用控件实现 这样不会因机型不同导致背景弧边变形，如果UI给的切图有带弧边的白色背景图 并不需要使用它 1. 创建我的 MyTabBar
只需3步，uniapp自定义微信小程序tabbar
爱喝啤酒的友
10-18 2816
简单三步，uniapp实现微信小程序自定义tabbar，直接复制代码即可快速体验
uniapp使用uview自定义底部导航栏
04-30
在uniapp中使用uView自定义底部导航栏的步骤如下： 1. 安装uView插件，在HBuilderX中打开项目，右键点击项目根目录，选择"插件安装"，搜索uView，安装并重启HBuilderX。 2. 在App.vue文件中引入uView组件库： ```javascript import uView from 'uview-ui'; Vue.use(uView); ``` 3. 在pages.json中配置底部导航栏，如下所示： ```json { "pages": [ { "path": "pages/index/index", "style": { "navigationBarTitleText": "首页" } }, { "path": "pages/mine/mine", "style": { "navigationBarTitleText": "我的" } } ], "tabBar": { "color": "#7A7E83", "selectedColor": "#007AFF", "backgroundColor": "#ffffff", "borderStyle": "black", "list": [ { "pagePath": "pages/index/index", "text": "首页", "iconPath": "static/tabbar/home.png", "selectedIconPath": "static/tabbar/home_active.png" }, { "pagePath": "pages/mine/mine", "text": "我的", "iconPath": "static/tabbar/mine.png", "selectedIconPath": "static/tabbar/mine_active.png" } ] } } ``` 其中，"tabBar"字段配置底部导航栏，"list"数组配置每个导航项的属性。 4. 在各个页面中添加导航栏的内容，如下所示： ```html <template> <view> <view>这是首页</view> </view> </template> <script> export default { data() { return { title: '首页' } }, onNavigationBarButtonTap() { uni.navigateTo({ url: '/pages/search/search' }); } } </script> ``` 其中，"data"中配置页面标题，"onNavigationBarButtonTap"函数配置导航栏右侧按钮的点击事件。 5. 在App.vue中配置全局导航栏样式，如下所示： ```scss <style lang="scss"> // 配置全局导航栏样式 .u-navbar { background-color: #007aff; color: #ffffff; } </style> ``` 6. 运行项目，即可看到自定义的底部导航栏了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值