uniapp自定义tabber不跳转页面只是调用方法

可以通过在uni-app中自定义组件实现自定义tabbar，并且在点击tabbar时调用对应的方法而不是跳转到页面。具体步骤如下：

1. 创建自定义组件

在uni-app项目中创建一个自定义组件，可以参考uni-app官方文档的说明：https://uniapp.dcloud.io/component/README。

2. 在自定义组件中定义tabbar

在自定义组件中，可以使用uni-app提供的组件来实现tabbar，比如使用uni-icons组件来展示图标，使用uni-badge组件来展示未读消息数等。

3. 在自定义组件中定义方法

在自定义组件中定义点击tabbar时的方法，并且在该方法中调用需要执行的函数。

4. 在需要使用自定义tabbar的页面中引用自定义组件

在需要使用自定义tabbar的页面中引用自定义组件，并将自定义组件放置在页面的底部，替代原来的tabbar。

5. 在页面中调用自定义组件中定义的方法

在页面中需要调用自定义tabbar中定义的方法时，可以通过获取组件实例来调用对应的方法，比如使用this.selectComponent()方法。

以上就是uni-app中实现自定义tabbar并且不跳转页面只是调用方法的步骤。

相关问题

uniapp配置tabber跳转配置

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，它允许开发者编写一次代码，然后发布到 iOS、Android、Web（包括微信小程序）等多个平台。在 uni-app 中配置 tabbar 跳转主要涉及到 pages.json 文件的配置。下面是配置 tabbar 跳转的基本步骤：

1. 在 pages.json 文件中找到 `tabBar` 字段，这是用于配置底部或顶部 tabbar 的地方。
2. 在 `tabBar` 字段中定义需要显示的 tab 项，包括每个 tab 的图标、文本和跳转页面路径。
3. 使用 `path` 指定页面路径，`iconPath` 指定未激活时显示的图标路径，`selectedIconPath` 指定激活时显示的图标路径。
4. 当点击 tabbar 中的某一项时，uni-app 将会根据 `path` 指定的路径跳转到相应的页面。

以下是一个简单的 tabbar 配置示例：

{
  "tabBar": {
    "list": [
      {
        "text": "首页",
        "iconPath": "resources/home.png",
        "selectedIconPath": "resources/home_active.png",
        "path": "pages/index/index"
      },
      {
        "text": "分类",
        "iconPath": "resources/category.png",
        "selectedIconPath": "resources/category_active.png",
        "path": "pages/category/category"
      },
      {
        "text": "购物车",
        "iconPath": "resources/cart.png",
        "selectedIconPath": "resources/cart_active.png",
        "path": "pages/cart/cart"
      },
      {
        "text": "我的",
        "iconPath": "resources/profile.png",
        "selectedIconPath": "resources/profile_active.png",
        "path": "pages/profile/profile"
      }
    ]
  }
}

在上面的配置中，我们定义了四个 tab，每个 tab 都有对应的图标和跳转页面路径。当用户点击不同的 tab 时，应用将根据 `path` 指定的路径跳转到相应的页面。

uniapp离开此tabber页面时触发

在uniApp中，如果你想在用户离开当前TabBar页面时触发某个事件或操作，你可以使用`uni.onPageShow`和`uni.onPageHide`这两个生命周期钩子函数。

`uni.onPageShow`会在页面显示时触发，而`uni.onPageHide`则会在页面隐藏（即离开TabBar页）时触发。通常你在`onPageHide`回调里可以执行一些清理工作、保存数据或者发送异步请求的操作，因为你知道用户即将离开当前页面。

例如：

Page({
  data: {},
  
  onLoad() {
    uni.onPageHide(() => {
      // 页面将要关闭时的操作
      console.log('用户正在离开当前TabBar页面');
      // 可能的操作，如：清理缓存、保存数据等
    });
  },
  
  onDestroy() {
    // 页面销毁前移除监听
    uni.offPageHide(this.handlePageHide);
  }
})

在这个例子中，`handlePageHide`是你为`onPageHide`注册的处理函数名。记得在`onDestroy`生命周期钩子中移除这个监听，避免内存泄漏。