小程序自定义tabbar onshow
时间: 2023-07-30 18:12:29 浏览: 115
您好,针对您的问题,我理解您是想在小程序中自定义 TabBar 并在页面展示时触发一个回调函数。可以考虑以下两种方式:
1. 使用 wepy 或者 mpvue 等框架自带的自定义 TabBar 组件,并在组件的 onShow() 方法中触发自定义的回调函数。
2. 使用原生开发自定义 TabBar,实现自己的业务逻辑,并在每个页面的 onShow() 方法中手动触发回调函数。
需要注意的是,对于第二种方式,如果您的小程序是使用 wx.navigateTo() 等方法跳转页面的,需要手动在每个页面的 onLoad() 方法中获取 TabBar 组件,并将组件的状态同步到当前页面。
希望以上内容能对您有所帮助。如有任何疑问,请随时追问。
相关问题
小程序自定义tabbar页面 渲染后切换页面再回来,为什么当前tabbar页面的onshow不触发,show不触发我就没法刷新数据呀
您好,针对您的问题,可能是由于小程序页面栈机制导致的。
在小程序中,当您从一个页面跳转到另一个页面后再返回时,只会触发当前页面的 onShow() 方法,而不会触发 TabBar 页面的 onShow() 方法。因此,如果您在自定义 TabBar 页面中需要在每次展示时都触发回调函数并刷新数据,可以考虑使用小程序的事件机制。
具体实现方式可以在自定义 TabBar 页面的 onLoad() 方法中注册事件监听器,并在事件触发时触发回调函数,例如:
```
// 在 onLoad() 方法中注册事件监听器
onLoad() {
// 监听自定义事件 'refreshTabBar'
wx.onAppShow(() => {
// 触发回调函数
this.onTabBarShow()
})
}
// 在 onTabBarShow() 方法中触发自定义事件 'refreshTabBar'
onTabBarShow() {
// 触发自定义事件 'refreshTabBar'
wx.triggerEvent('refreshTabBar')
}
```
以上代码中,假设在自定义 TabBar 页面中定义了一个 onTabBarShow() 方法作为回调函数,并在 onLoad() 方法中注册了事件监听器。当 TabBar 页面展示时,会触发 onTabBarShow() 方法并通过 wx.triggerEvent() 方法触发自定义事件 'refreshTabBar'。在其他页面中,可以通过 wx.on() 方法监听 'refreshTabBar' 事件,并在事件触发时执行相应的操作。
希望以上内容能对您有所帮助。如有任何疑问,请随时追问。
小程序自定义tabbar 渲染后切换页面再回来,为什么 onshow不执行,show不执行我就没法刷新数据呀
您好,针对您的问题,可能是由于小程序的页面生命周期机制导致的。
在小程序中,当您从一个页面跳转到另一个页面后再返回时,只会触发 onShow() 方法而不会触发 onLoad() 方法。因此,如果您在自定义 TabBar 组件中需要在每个页面展示时都触发回调函数并刷新数据,可以考虑在 onShow() 方法中手动调用自定义回调函数。
具体实现方式可以在自定义 TabBar 组件的 onShow() 方法中获取当前页面的路由信息,并根据路由信息判断是否需要触发回调函数,例如:
```
// 获取当前页面的路由信息
const pages = getCurrentPages()
const currentPage = pages[pages.length - 1]
const route = currentPage.route
// 根据路由信息判断是否需要触发回调函数
if (route === 'pages/home/home') {
// 触发回调函数
this.$emit('onTabBarShow')
}
```
以上代码中,假设在自定义 TabBar 组件的 onShow() 方法中使用了类似于 Vue.js 的 $emit() 方法来触发自定义回调函数,同时判断当前页面的路由信息,如果当前页面是首页则触发回调函数。
希望以上内容能对您有所帮助。如有任何疑问,请随时追问。
阅读全文