uniapp 可滑动选项卡

### 创建可滑动选项卡 在 UniApp 中创建可滑动选项卡可以通过组合 `top-tabbar` 组件和 `swiper` 组件来实现。下面是一个完整的示例，展示了如何通过脚本导入并注册组件以及配置相应的数据和方法。 #### 导入与注册组件 首先，在页面的 `<script>` 部分引入所需的 `topTabbar` 组件，并将其注册到当前 Vue 实例中： ```javascript import topTabbar from '@/components/top-tabbar/top-tabbar.vue' export default { components: { topTabbar }, } ``` #### 数据初始化 接着定义一些初始的数据用于控制选项卡的状态及显示的内容： ```javascript data() { return { // 当前选中的标签索引 tabIndex: 0, // 导航栏标签列表数组 tabBars: [ { name: '全部', id: 0 }, { name: '报名中', id: 1 }, { name: '待审核', id: 2 }, { name: '预备中', id: 3 }, { name: '进行中', id: 4 }, { name: '已结束', id: 5 } ] }; }, ``` #### 方法定义 为了响应用户的交互操作，比如点击不同的标签项时更新状态，可以定义如下方法： ```javascript methods: { toggleTab(index) { this.tabIndex = index; } } ``` #### 页面布局 最后，在模板部分构建视图结构，这里使用了 `view`, `scroll-view` 和 `swiper` 来展示顶部导航条及其对应的内容区域： ```html <template> <view class="container"> <!-- 可滑动顶部导航 --> <top-tabbar :tabs="tabBars" @change="toggleTab"></top-tabbar> <!-- Swiper 切换内容区 --> <swiper :current="tabIndex" @change="(e)=>this.tabIndex=e.detail.current"> <swiper-item v-for="(item,index) in tabBars" :key="index"> <view>{{ item.name }} 的具体内容</view> </swiper-item> </swiper> </view> </template> ``` 上述代码实现了基本的功能需求，即当用户选择不同类别的活动时，能够平滑过渡至相应分类下的详情页[^1]。如果希望给导航栏添加底部阴影效果，则可以在 `top-tabbar` 组件内的 CSS 文件里加入合适的样式规则[^2]。 此外，还可以参考官方提供的简单 Demo 进一步了解具体的实现细节[^3]。