uni-app进入底部tabbar页面 不加载数据的问题

一般来说,tabbar 的onLoad方法,只加载一次。加载完后就不会再次调用 onLoad方法了。但是 onShow 和 onHide 是每次切换tabbar页面的时候都会调用。
好了,那就把加载页面数据的方法写在onshow里面吧。可是我的页面是由两个动态组件组成的 是个 切换的导航:分别是两个组件 进入tabbar页面后,默认第一个显示的组件自动加载数据,但是第一个组件的created方法触发不了。
在这里插入图片描述

在点击我的标签导航的时候可以调用子组件中的created钩子函数。于是在主页面中的onshow方法中直接调用了 点击标签的方法 功能就实现了:

onShow:function(){
			//changeTab是切换两个标签的方法
			this.changeTab('本矿煤检报告','localeReports','localeReports')
			
		}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
uni-app中,你可以通过以下步骤来实现自定义底部tabbar: 1. 在main.js文件中添加以下代码段,以解决点击两次才能选择icon的问题: ``` Vue.mixin({ methods: { setTabBarIndex(index) { if (typeof this.$mp.page.getTabBar === 'function' && this.$mp.page.getTabBar()) { this.$mp.page.getTabBar().setData({ selected: index }) } } } }) ``` 2. 在index.wxss文件中重新定义tabbar的样式,包括背景、高度、字体大小等。以下是一个例子: ```css .tab-bar { position: fixed; bottom: 0; left: 0; right: 0; display: flex; box-shadow: 0px -2px 10px 0px rgba(0,0,0,0.05); box-sizing: content-box; } .tab-bar-item { flex: auto; text-align: center; display: flex; justify-content: center; align-items: center; flex-direction: column; background: #fff; height: 120rpx; } /* 自定义样式 */ .tab-bar-item.diy { margin-top: 0!important; background: transparent; position: relative; flex: inherit; width: 134rpx; } .tab-bar-item image { width: 48rpx; height: 48rpx; overflow: initial; } .tab-bar-item view { font-size: 24rpx; } .tab-bar-item image.diy { position: absolute; width: 134rpx; height: 140rpx; bottom: 25.6%; z-index: 100; } .tab-bar-item view.diy { margin-top: 90rpx; background: #fff; width: 100%; height: 100%; padding-top: 58rpx; z-index: 99; } ``` 通过以上步骤,你可以在uni-app中实现自定义底部tabbar。使用以上的代码段和样式定义,你可以根据需求自定义底部tabbar的样式和交互效果。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [uni-app-tabbar:uni-app底部初步实现(不支持小程序)](https://download.csdn.net/download/weixin_42172572/15923240)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] - *2* *3* [uni-app自定义底部tabbar](https://blog.csdn.net/Janent168/article/details/129809136)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

别再NULL了

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值