uniapp左右滑动切换tabbar

在 Uniapp 中实现左右滑动切换 TabBar 的功能可以通过以下步骤来完成：

1. 首先，你需要创建一个包含多个 Tab 的页面组件。例如，在 `pages` 文件夹下创建一个 `tabbar` 文件夹，并在该文件夹下创建多个页面组件，如 `home.vue`、`category.vue`、`cart.vue`、`profile.vue`。

2. 在 `App.vue` 文件中，使用 `uni-tab-bar` 组件来实现底部 TabBar。在 `template` 部分添加以下代码：

<template>
  <view>
    <uni-tab-bar :current="currentTab" @click="changeTab">
      <uni-tab-bar-item title="首页" icon="home"></uni-tab-bar-item>
      <uni-tab-bar-item title="分类" icon="category"></uni-tab-bar-item>
      <uni-tab-bar-item title="购物车" icon="cart"></uni-tab-bar-item>
      <uni-tab-bar-item title="个人中心" icon="profile"></uni-tab-bar-item>
    </uni-tab-bar>
    <router-view></router-view>
  </view>
</template>

3. 在 `script` 部分添加以下代码：

<script>
export default {
  data() {
    return {
      currentTab: 0, // 当前选中的 Tab 索引
    };
  },
  methods: {
    changeTab(index) {
      this.currentTab = index; // 切换 Tab
    },
  },
};
</script>

4. 在 `style` 部分根据需要自定义样式。

5. 接下来，我们需要在 `main.js` 文件中引入 `swiper` 组件，用于实现左右滑动切换功能。在 `main.js` 文件中添加以下代码：

import Vue from 'vue';
import App from './App';

// 引入 Swiper 组件
import uniSwiperDot from '@/components/uni-swiper-dot/uni-swiper-dot.vue';