uniapp滑动tabs栏

Uniapp提供了使用uni-ui组件库中的uni-tabs组件来实现滑动tabs栏的功能。

1. 引入uni-ui组件库

在项目的main.js中引入uni-ui组件库：

import Vue from 'vue';
import App from './App';
import uniUi from 'uni-ui';
Vue.use(uniUi);

2. 使用uni-tabs组件

在需要使用滑动tabs栏的页面中，使用uni-tabs组件：

<uni-tabs :current="current" @change="onChange">
  <uni-tab title="Tab1">
    <!-- Tab1内容 -->
  </uni-tab>
  <uni-tab title="Tab2">
    <!-- Tab2内容 -->
  </uni-tab>
  <uni-tab title="Tab3">
    <!-- Tab3内容 -->
  </uni-tab>
</uni-tabs>

其中，`current`属性指定当前选中的tab的索引，`@change`事件在切换tab时触发。

3. 配置uni-tabs组件

可以通过`uni-tabs`的属性来配置滑动tabs栏的样式和行为：

<uni-tabs :current="current" @change="onChange" :scrollable="true" :duration="300">
  <uni-tab title="Tab1">
    <!-- Tab1内容 -->
  </uni-tab>
  <uni-tab title="Tab2">
    <!-- Tab2内容 -->
  </uni-tab>
  <uni-tab title="Tab3">
    <!-- Tab3内容 -->
  </uni-tab>
</uni-tabs>

其中，`scrollable`属性指定tabs栏是否可滑动，`duration`属性指定滑动动画的持续时间。

通过以上三步，就可以实现一个简单的滑动tabs栏了。