自定义 tabBar 在切换 tab 时会使 tabBar 消失

最新推荐文章于 2023-11-02 23:15:42 发布
置顶 VIP文章 最新推荐文章于 2023-11-02 23:15:42 发布
阅读量1.6k 收藏
点赞数
分类专栏： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/han_calligrapher/article/details/106575919
版权

app.json和页面json 文件中引用自定义的tabbar组件，引发的系列页面错乱问题：

1、出现问题的机型： ios、android均会出现（如iphone8plus、iphoneX、三星s8）

2、微信版本号: 7.0.12

3、出现问题的时间：

时间：2020年6月5日上午11点左右到下午14点左右

时间：2020年6月10日上午10点左右到上午11点左右

4、未改任何代码，线上版本、体验版都自动恢复正常

时间：2020年6月5日下午14点左右之后。

时间：2020年6月10日上午11点左右之后。

现将出现问题的场景和方案描述如

最低0.47元/天 解锁文章
guoguole_粿粿乐
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
customTabBar:小程序自定义切换无闪烁的tabbar
05-10
1、前言 很多时候，小程序自带的tabBar不能够满足项目需求，这个时候就需要我们自定义tabBar了。但是在网上找了很久，基本都是存在切换时闪烁的问题。幸运的是从基础库2.5.0开始，可以官方使用自定义tabBar了。 2、自定义tabBar样式 如下图所示，我们需要一个展示“首页”、“我的”，和一个可以点击跳转到发布的tabBar。这种样式，原生的就无法满足需求了，只能自定义tabBar了。 3、引入custom-tab-bar及相关配置 3.1、如下图所示，将custom-tab-bar导入项目根目录 3.2、在app.json中配置好切换的tabbar，并设置"custom": true，然后将基础库设置成2.5.0 3.3、使用自定义TabBar，在切换的TabBar界面的onShow中添加如下代码。如首页中设置 selected: 0，我的中设置 selected: 2。因为
微信小程序自定义底部导航栏，切换不同页面显示不同tabbar
热门推荐
small_lack的博客
07-08 4万+
    在一个微信小程序中想要用到两种不同的tabbar样式，需要在app.js中自定义，在页面加载时进行调用。比如一个小程序需要两个版本（用户版、商家版），并且能通过一个按钮在两个版本间进行切换，可能会用到这种方式。    此处以两个页面（index，logs）显示两种tabbar样式为例，通过切换按钮进行切换。    首先有一个模板文件：tabbar.wxml<template name...
微信小程序底部tabBar不显示图标
梦凝哲雪
10-12 1909
有网友描述是app.json中pages中的第一个页面不是tabBar配置中list[0]的第一个页面大导致"pages":[],"list": ["text": "类型",},"text": "首页",},"text": "详情",},"text": "购物车",},"text": "我的",},效果展示：顺序互不干涉 是可以显示的！！！可能是以下几个原因导致底部tabBar不显示图标：图标路径错误：请检查图标路径是否正确，建议使用相对路径。
tarbar切换时，刷新数据，如果是返回tarbar页面，就不刷新数据
wm_wu的博客
11-27 301
tarbar切换时，刷新数据，如果是返回tarbar页面，就不刷新数据 解决办法，在第二步页面做了一个本地存储变量，在第一步的页面判断这个变量进而确定是否是第二步页面返回。 第二步页面代码： /** * 生命周期函数--监听页面显示 */ onShow: function() { wx.setStorageSync('goBack', 1); }, 第一步页面代码，也就是tarbar页面： /** * 生命周期函数--监听页面显示 */ onShow: function() {
vue echarts在tab选项卡中样式丢失
辞忧*的博客
03-09 533
echarts图表会在页面加载时绘图，但是在tab选项卡中如果进行切换，第一个选项卡的echarts样式就会失效，宽度会默认变成100px。 查明原因后发现是因为tab切换时会添加display: none; 属性，使当前echarts拿不到当前元素造成这种原因 解决方法 只需要 autoresize 这个属性就可以判断实例是否需要自动进行重绘 <v-chart :options="setDatas" autoresize style="height: 195px" /> .
关于如何解决微信小程序无法正常显示tabBar的问题
qq_24484317的博客
11-02 2224
微信小程序的tabBar无法正常显示
小程序自定义tabBar切换时，tabBar状态切换失效
llykingsohyun的博客
09-22 2551
自定义tabBar切换页面时需要点击两次，样式状态才对。第一点击时只是页面跳转了。 第一步.在app.js文加下添加全局变量来锁定当前bar的索引值 globalData: { selectedIndex: 0 } 第二步： custom-tab-bar->index.js文加下 methods: { switchTab(e) { const data = e.currentTarget.dataset; ...
Vue项目tab切换页面偶尔不显示的问题
lgdaren的博客
08-24 1780
项目开发过程中遇到一个bug，tab切换页面，某一块会莫名其妙消失不显示，控制台报错 vue cannot read property ‘length’ of null。查阅了资料说可能是因为数据加载需要一段时间，此时渲染数据找不到数据length报错导致的，需要用v-if判断一下数据有没有。但是试了这个方法发现还是不行。最后在同事的帮助下找到了问题的解决方法。只需在给数据赋值的时候做个处理。 t...
vue+elementui tab切换丢失参数
weixin_48271592的博客
06-30 2869
vue+elementui列表跳详情后，点其他菜单进行tab切换丢失详情页参数
vant Tabbar 标签栏跳转二级页面时隐藏标签栏
m0_59023970的博客
03-08 670
vant Tabbar 标签栏跳转二级页面时隐藏标签栏。如何使用vant就不描述了，大家肯定会的，简单点咯，直接上代码。
微信小程序开发之自定义tabBar的实现
01-03
如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。 Tip： 1.当设置 position 为 top 时，将不会显示 icon ...
微信小程序自定义tabbar
07-24
微信小程序自定义tabbar【内有点击和滑动两种方式】 <view class="tab-list {{currentTab == idx?'active':'default'}}" wx:for="{{tabArray}}" wx:for-index="idx" wx:for-item="itemName" data-current="{{idx}...
100 行代码实现Flutter自定义TabBar的示例代码
01-20
接下来带你一步步实现自定义 TabBar…… 一、目标和效果 需求目标是： 这个页面不要 material 左侧统一的返回键和 Title 在右侧有取消按钮，点取消即返回 点击 Tab 可以实现 content 切换并带有动画效果 滑动...
微信小程序自定义菜单切换栏tabbar组件代码实例
01-20
这篇文章主要介绍了微信小程序自定义菜单切换栏tabbar组件代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 效果图： wxml代码： <view class=top_...
杭州电子科技大学数据结构(题目).pdf
04-26
杭州电子科技大学，期末考试资料，计算机专业期末考试试卷，试卷及答案，数据结构。
重庆大学 2010-2011(一)模拟电子技术A卷答案.pdf
最新发布
04-26
重庆大学期末考试试卷，重大期末考试试题，试题及答案
如何创意年会组织形式？.docx
04-26
年会班会资料，节目策划，游戏策划，策划案，策划方案，活动方案，筹办，公司年会，开场白，主持人，策划主题，主持词，小游戏。
基于Django框架的博客系统.zip
04-26
基于Django框架的博客系统.zip
【基于Springboot+Vue的Java毕业设计】校园服务平台项目实战(源码+录像演示+说明).rar
04-26
【基于Springboot+Vue的Java毕业设计】校园服务平台项目实战(源码+录像演示+说明).rar 【项目技术】 开发语言：Java 框架：Spingboot+vue 架构：B/S 数据库：mysql 【演示视频-编号：321】 https://pan.quark.cn/s/8dea014f4d36 【实现功能】 系统可以提供信息显示和相应服务，其管理员增删改查接单员和接单员资料，审核接单员预订订单，查看订单评价和评分，通过留言功能回复用户提问。
uniapp 如何解决自定义tabbar切换时页面闪烁
06-06
自定义 TabBar 切换时页面闪烁是因为页面重新渲染导致的，解决办法有很多种，这里介绍一种比较简单的做法。 1. 在 App.vue 中创建一个全局变量，用于记录当前选中的 Tab： ```javascript export default { globalData: { currentTab: 0, }, } ``` 2. 在 TabBar 组件中，绑定当前选中的 Tab： ```html <!-- TabBar.vue --> <template> <view class="tab-bar"> <view class="tab-item" :class="{ active: currentTab === 0 }" @click="switchTab(0)"></view> <view class="tab-item" :class="{ active: currentTab === 1 }" @click="switchTab(1)"></view> <view class="tab-item" :class="{ active: currentTab === 2 }" @click="switchTab(2)"></view> </view> </template> <script> export default { props: { // 从父组件传入当前选中的 Tab currentTab: { type: Number, default: 0, }, }, methods: { // 切换 Tab switchTab(index) { this.$emit('switchTab', index); }, }, }; </script> ``` 3. 在 TabBar 所在的页面中，监听 Tab 切换事件，并手动切换页面： ```html <template> <view> <view v-if="currentTab === 0">Tab 1</view> <view v-if="currentTab === 1">Tab 2</view> <view v-if="currentTab === 2">Tab 3</view> <TabBar :currentTab="currentTab" @switchTab="onSwitchTab" /> </view> </template> <script> export default { data() { return { currentTab: 0, }; }, methods: { // 监听 Tab 切换事件 onSwitchTab(index) { // 如果切换到当前页面，则不进行操作 if (index === this.currentTab) { return; } // 记录当前选中的 Tab this.currentTab = index; // 手动切换页面 uni.switchTab({ url: `/pages/tab${index + 1}/index`, }); }, }, }; </script> ``` 这样，在 Tab 切换时，页面不会重新渲染，也就不会出现闪烁的问题。需要注意的是，手动切换页面时，需要使用 `uni.switchTab` 方法，而不是 `uni.navigateTo` 或 `uni.redirectTo` 方法。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值