uniapp滑动选项卡切换页面

在 UniApp 开发中，滑动选项卡通常通过 TabBar 组件来实现页面间的切换。TabBar 是一种常见的界面元素，它包含多个标签页，用户可以通过滑动选择并进入不同的内容区域。以下是创建 UniApp 滑动选项卡的基本步骤：

1. **引入组件**: 首先，在项目结构中，需要在对应的页面或者 App.vue 中引入 `tab-bar` 组件。

<template>
  <uni-tabbar :options="tabBarOptions">
    <!-- 这里会渲染每个 tab 的内容 -->
  </uni-tabbar>
</template>

<script>
import { TabBar } from 'vant';

export default {
  components: {
    TabBar,
  },
  data() {
    return {
      tabBarOptions: [
        // 定义每个 tab 的配置
        {
          index: 0,
          text: '首页',
          path: '/pages/home/index', // 或者 'home'
          selectedIconPath: 'path/to/home-selected-icon.png',
          normalIconPath: 'path/to/home-unselected-icon.png',
        },
        // 添加更多 tab...
      ],
    };
  },
};
</script>

2. **配置选项**: 在 `tabBarOptions` 数组中，你需要提供每个 tab 的 `index`、`text`（显示的文字）、`path`（跳转到的页面路径）以及选中和未选中状态下的图标路径。

3. **样式调整**: 根据实际需求，你可以调整 TabBar 的样式，包括颜色、位置等。可以参考 Vant UI 或者自定义 CSS 来定制样式。

4. **监听切换事件**: 如果你想在切换时执行某些操作，可以在 `TabBar` 上绑定 `on-select` 事件来监听切换事件。

<uni-tabbar :options="tabBarOptions" @select="handleTabSelect"></uni-tabbar>

methods: {
  handleTabSelect(tab) {
    console.log('当前选中的 tab：', tab);
    // 在这里执行切换后的操作
  },
}