小程序自定义菜单 tabbar 点击两次icon才能状态选中

最新推荐文章于 2024-12-10 15:30:04 发布
原创 最新推荐文章于 2024-12-10 15:30:04 发布 · 1.7k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

博客提到需在每个菜单页面设置属性状态，并给出了相关代码示例，通过 onShow 函数判断是否能获取 TabBar 并设置其选中状态为 0。

需要在每个菜单页面设置属性状态

  onShow: function () {

    if (typeof this.getTabBar === 'function' && this.getTabBar()) {

      this.getTabBar().setData({

        selected: 0

      })

    }

  }

uni-app菜单tabbar（十四）
A_nanda的博客
06-28 910
原生tabBar是相对固定的配置方式，可能无法满足所有场景，这就涉及到自定义tabBar。但注意除了H5端，自定义tabBar的性能体验会低于原生tabBar。App和小程序端非必要不要自定义。H5端的自定义tabBar组件：H5端不存在原生tabBar性能更高的概念，并且宽屏下常见的tabBar在顶部而不是底部，此时可以使用custom-tab-bar组件来自定义普通自定义tabBar：使用view自行绘制tabBar。如果页面是多页方式，切换tabBar将无法保持底部tabBar一直显示。
uniapp解决使用uview封装的tabbar卡顿问题
amber_1210的博客
09-13 1076
然后我总结了一下思路：都具有相同的大体页面布局，所以将外部布局提取出来形成一个单独的layout.vue组件。底部tabbar一直在，无论是否有数据，点击不同tabbar，修改不同标题和颜色。如果要使用下拉刷新也是可以的，通过$emit和$on来实现组件的传值，话不多说，直接上代码。在tabbar子页面中使用$on方法，一定要记得离开页面要销毁监听事件！封装layout.vue页面，作为子组件引入父组件search.vue页面。在search.vue父组件页面中使用$emit方法。
微信小程序 开发 自定义tabbar后，需要选择点击两次才会出现样式选中
只会hello world的小白啊
11-15 1311
微信小程序 开发 自定义tabbar后，需要选择点击两次才会出现样式选中
原生微信小程序使用vant的tabbar（解决点击俩次图标才正确切换）
weixin_62639453的博客
03-25 6162
一、声明：在导入使用vant （tabbar）组件的时候，发现通过点击切换的方法来更改active的方法，会出现图标没用及时对应上，需要第二次点击才对应上的问题。在每一个页面使用tabbar自定义组件的地方，在onshow生命周期函数里初始active的值，用来对应每个页面切换之后展示对应的图标。6.与pages同名创建custom-tab-bar文件夹（名字不能变），并创建index组件（tabbar自定义组件）假如，我采用index页面作为一个tabbar页，对应的active可以这么更改其选中态。
关于uniapp生成小程序,tabbar需要点击两次才能切换的问题
sata21_21的博客
01-05 1754
使用uniapp自定义小程序tabBar的时候,会出现点击TabBar,页面切换但是图标没有切换完成的问题,需要二次点击才能正常切换图标.这是由于每个tab页下面的自定义tabBar组件实例是不同的,按照微信官方的解决方案,需要在每个tabBar对应的页面使用getTabBar获取对应页面实例,并调用 setData 更新选中态.于Rockway办公室。写于2024年1月5日16:32。后想到,也许是vue3中取消了this,导致unidentified,那如果没有this,该怎么获取getTabBar?
解决tabbar点击两次图标才正常对应的问题
小香菜子的博客
05-15 700
（2）index页面。
解决Uni-app自定义底部tabber，切换tabbar时，点击两次tabbar才会显示正确，但页面可以正常切换的问题
qq_39210364的博客
06-07 3284
底部tabbar
uview 2.x版本 tabbar在uniapp小程序里头点击两次才能选中图标
wltsysterm的博客
07-30 2668
有了上面的结论，我觉得只要定义一个全局的变量来记录当前的图标位置，脱离当前组件的控制，问题应该就解决了，所以我在vuex里头定义了一个变量tabIndex，每次切换修改这个变量。找了一圈，没找到答案，但是我分析了下，可能是uni.switchTab导致当前的组件发生某种不可描述的问题吧。但是很快就发现了，使用了其中的tabbar组件，出现如题的问题。问题点击我的，页面成功切换到了我的，但是图标没被选中（第一次会选中我的，然后闪变会首页，只是图标闪变，页面保持）。...
微信小程序开发自定义tabBar
qq_35478008的博客
01-16 943
如果此时设置完，存在切换闪烁的问题，可以把custom-tab-ba/index.js中this.setData({selected: data.index})注释掉。里面加上，selected是custom-tab-bar里面当前设置选中下标的参数名，而值是对应tabbar数组里面对应的下标 ，相应的修改 selected的值。custom-tab-bar/index.js，这里配置上需要展示的tabBar页面。2.与pages文件夹同级新建custom-tab-bar文件夹，名字一定不能错。
小程序多用户底部导航栏
silencefly的博客
05-07 1638
小程序开发之旅（五） 自定义的多用户的底部导航栏
微信小程序开发的学习资料收集
热门推荐
zhan9le的博客
06-28 1万+
小程序开发学习资料集合
微信小程序——自定义底部tabBar（以及解决图标点击两次才能选中状态）
a13849911849的博客
04-22 3143
微信小程序——自定义底部tabBar，自定义底部tabBar，自定义底部tabBar图标点击两次才能选中状态
uniapp使用自定义tabbar时实现跳转tabbar不刷新
Seven597的博客
01-09 5284
先在，pages.json中配置tabbar，如下,设置高度为0，界面只需要设置路径。这样的话四个主界面可以基于路由占位的方式进行组件化开发！自定义tarbar的代码如下，图标和路径自行改变。在main.js 全局挂载。
解决小程序中使用webview 返回按钮需要点击两次才能返回
一给窝里Giao的博客
03-22 7202
在开发小程序中，碰到使用web-view标签进入活动页，在返回时需要点击两次才能返回小程序，查了很多文档，通过验证找到了解决方法 1.出现原因 通过小程序社区以为也是加了#wechat_redirect导致 于是把参数去掉进行测试，发现还是要点击两次才能返回，猜测应该是链接里面别的重定向导致 2.解决方法 在百度上查找了很多相关的解决方法，但是测试都没生效，不过天无绝人之路，还是在一位大佬的博客...
微信小程序自定义tabbar容易遇到的问题
weixin_56388890的博客
11-29 3210
解决custom-tab-bar点击不准的问题
微信小程序——自定义tabBar
c_qianxia5040的博客
09-27 363
tabbar。
解决微信小程序自定义tabar点击两次图标才能选中状态
皮皮的博客
12-10 723
tab-bar现有需求：小程序用户有三种身份（首页、订单、我的），根据不同用户身份显示不同的tabbar。
解决微信小程序自定义底部tabbar需要点击两次跳转问题
qq_70046407的博客
08-07 2097
接着页面会报错，然后第三步：在自定义tabbar底部js文件中设置一个和data同级的方法。第二步，在跳转页面的js文件底部设置当前索引。第一步，在自定义tabbar文件js中配置。
tabbar图标切换 要点击两次才能有选中状态问题
梦否
03-04 7074
问题：tabbar图标切换 要点击两次才能有选中状态 原因：没有拷贝组件函数 官网中所给出的自定义组件地址：here 在 app.json 中添加： "tabBar": { "custom": true, "color": "#000000", "selectedColor": "#000000", "backgroundColor": "#000000", "list": [{ "pagePath": "page/component/index",
uniapp tabbar要点击两次才能有选中状态
最新发布
08-08
<think>我们正在解决UniApp中自定义TabBar需要点击两次才能切换选中状态的问题。根据引用内容，我们知道问题在于每个Tab页对应的自定义TabBar组件实例不同，导致状态更新延迟。以下是解决方案： ### 解决方案 1. **使用`getTabBar`方法更新状态**（引用[^1]建议） 在每个Tab页的`onShow`生命周期中，获取TabBar实例并手动设置选中状态： ```javascript onShow() { if (typeof this.getTabBar === 'function' && this.getTabBar()) { this.getTabBar().setData({ selected: 0 // 当前TabBar索引 }); } } ``` 2. **确保`custom-tab-bar`组件正确配置**（引用[^2]强调） 检查`custom-tab-bar/index.js`中的`list`配置是否与`pages.json`中的`tabBar`配置完全一致，包括： - 页面路径（`pagePath`） - 图标路径（`iconPath`/`selectedIconPath`） - 文本（`text`） 3. **使用组件方式引入TabBar**（引用[^3]推荐） 在每个Tab页的模板中直接引入自定义TabBar组件，并通过`selected`属性绑定当前选中状态： ```html <!-- 在每个Tab页的.wxml中 --> <custom-tab-bar selected="{{selectedTab}}"></custom-tab-bar> ``` ```javascript // 在Tab页的.js中定义数据 data: { selectedTab: 0 // 当前Tab索引 } ``` ### 步骤详解 #### 方法一：`getTabBar`更新（官方推荐） 1. **创建自定义TabBar组件** 在项目根目录创建`custom-tab-bar`文件夹，并按照微信小程序规范编写组件（包括`.wxml`, `.wxss`, `.js`, `.json`）。 2. **配置`pages.json`** 在`pages.json`中声明使用自定义TabBar： ```json "tabBar": { "custom": true, "list": [ /* 你的Tab列表配置 */ ] } ``` 3. **在Tab页中更新状态** 在每个Tab页面的`onShow`方法中添加状态更新代码（示例为第一个Tab）： ```javascript onShow() { const tabBar = this.getTabBar(); if (tabBar) tabBar.setData({ selected: 0 }); } ``` #### 方法二：组件绑定（更稳定） 1. **将TabBar作为全局组件引入** 在每个Tab页的`json`文件中注册自定义TabBar组件： ```json { "usingComponents": { "custom-tab-bar": "/custom-tab-bar/index" } } ``` 2. **模板中绑定选中状态** 在`.wxml`中直接使用组件并传递当前选中索引： ```html <custom-tab-bar selected="{{selectedTab}}"></custom-tab-bar> ``` 3. **更新数据** 在页面`data`中初始化`selectedTab`，并在切换逻辑中更新（如`onLoad`/`onShow`）。 ### 注意事项 - **确保路径一致**：`custom-tab-bar`组件的路径和文件必须正确。 - **多端兼容**：上述代码以微信小程序为例，其他平台需调整。 - **性能**：方法二避免了实例化多个TabBar，推荐使用。 通过以上任一方法，即可解决TabBar需点击两次才切换的问题。 §§相关问题§§ 1. UniApp中如何全局注册自定义组件？ 2. 微信小程序自定义TabBar还有哪些常见问题？ 3. UniApp如何适配不同平台的TabBar样式？</think>### UniApp TabBar 点击两次才选中解决方案 在 UniApp 开发中，自定义 TabBar 需要点击两次才能触发选中状态的问题，通常是由于 **TabBar 组件实例未正确更新选中状态**导致的。以下是三种经过验证的解决方案： --- ### 解决方案一：使用 getTabBar() 方法（官方推荐）[^1][^2] 1. **在每个 Tab 页面的 `onShow` 生命周期中**添加状态更新代码： ```javascript onShow() { // 获取当前页面实例 const pages = getCurrentPages() const currentPage = pages[pages.length - 1] // 检查并更新 TabBar 状态 if (typeof currentPage.getTabBar === 'function' && currentPage.getTabBar()) { currentPage.getTabBar().setData({ selected: 0 // 当前 Tab 的索引值 }) } } ``` 2. **在 `custom-tab-bar` 组件中**确保 `list` 配置与 `pages.json` 完全一致： ```javascript // custom-tab-bar/index.js Component({ data: { list: [ { pagePath: "/pages/index/index", text: "首页", iconPath: "/static/tabs/home.png", selectedIconPath: "/static/tabs/home-active.png" }, // 其他 Tab 配置必须与 pages.json 相同 ] } }) ``` --- ### 解决方案二：组件化引入方式[^3] 1. **在每个 Tab 页面引入自定义 TabBar 组件**： ```html <!-- pages/index/index.wxml --> <custom-tab-bar selected="{{selectedTab}}"></custom-tab-bar> ``` 2. **在页面脚本中维护选中状态**： ```javascript // pages/index/index.js export default { data() { return { selectedTab: 0 // 当前 Tab 索引 } }, onShow() { this.setData({ selectedTab: 0 }) // 页面显示时更新状态 } } ``` 3. **组件内部处理选中逻辑**： ```javascript // custom-tab-bar/index.js methods: { switchTab(e) { const index = e.currentTarget.dataset.index this.setData({ selected: index }) uni.switchTab({ url: this.data.list[index].pagePath }) } } ``` --- ### 解决方案三：全局状态管理（Vuex） 1. **创建 TabBar 状态管理**： ```javascript // store/tabbar.js export default { state: { selected: 0 }, mutations: { setSelected(state, index) { state.selected = index } } } ``` 2. **在 TabBar 组件中使用状态**： ```javascript // custom-tab-bar/index.js import { mapState } from 'vuex' export default { computed: { ...mapState(['selected']) } } ``` 3. **在页面切换时更新状态**： ```javascript // 所有 Tab 页面的 onShow 生命周期 onShow() { this.$store.commit('setSelected', 0) // 传入当前 Tab 索引 } ``` --- ### 关键注意事项 1. **路径一致性**：`custom-tab-bar` 中的 `pagePath` 必须与 `pages.json` 中的配置**完全一致**（包括大小写） 2. **组件位置**：确保自定义 TabBar 组件位于项目根目录的 `/custom-tab-bar` 文件夹 3. **生命周期**：状态更新代码必须放在 `onShow` 而非 `onLoad`，因为 Tab 页面切换不会重新加载 4. **多端兼容**：测试时需在**微信开发者工具**中清除编译缓存（点击编译菜单的 "重新编译" 按钮） 通过以上任一方案，均可解决 TabBar 需要点击两次才切换状态的问题。推荐优先尝试**方案一**（官方标准方法），若仍存在问题可改用**方案三**（全局状态管理）。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值