uniapp实现滑动tabs栏

要实现滑动tabs栏，可以使用uni-app提供的swiper组件和scroll-view组件。

1. 在页面中引入swiper组件和scroll-view组件

<template>
  <view>
    <scroll-view scroll-x="true" class="tabs">
      <swiper :current="current" :duration="300" :autoplay="false" @change="tabChange">
        <swiper-item v-for="(item, index) in tabs" :key="index">
          <view :class="{'active': current === index}" @tap="tabClick(index)">{{ item }}</view>
        </swiper-item>
      </swiper>
    </scroll-view>
  </view>
</template>

2. 设置tabs栏的样式

.tabs {
  height: 40rpx;
  border-bottom: 1rpx solid #e5e5e5;
}
.swiper-item {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 40rpx;
  font-size: 28rpx;
  color: #666;
}
.active {
  color: #333;
  font-weight: bold;
  border-bottom: 2rpx solid #333;
}

3. 完成tabChange和tabClick方法

export default {
  data() {
    return {
      current: 0,
      tabs: ['tab1', 'tab2', 'tab3', 'tab4', 'tab5', 'tab6', 'tab7', 'tab8', 'tab9', 'tab10', 'tab11', 'tab12']
    }
  },
  methods: {
    tabChange(e) {
      this.current = e.detail.current
    },
    tabClick(index) {
      this.current = index
    }
  }
}

通过以上步骤，就可以实现滑动tabs栏了。需要注意的是，如果tabs栏的数量很多，可以使用scroll-x属性将tabs栏放在一个可滑动的容器中，便于用户选择tabs。