vue写一个横向滑动页面

直接上代码

<style lang="less">
page {
  background: #f0f1f2;
}
.desc {
  margin: 0 30rpx;
  height: 80rpx;
  display: inline-block;
  text-align: center;
  color: #333;
  font-family: PingFangSC-Regular;
  font-size: 28rpx;
  background: #fff;
  height: 80rpx;
  line-height: 80rpx;
}
.tab {
  height: 80rpx;
  line-height: 80rpx;
  > .tab-item {
    height: 80rpx;
    width: 50rpx;
  }
}
.active {
  display: inline-block;
  border-bottom: 4rpx solid #3d6ff0;
  color: #3d6ff0;
  cursor: pointer;
}
</style>

<template>
  <div>
  <scroll-view
    scroll-x="true"
    style=" white-space: nowrap; display: flex;background:#fff"
  >
    <div
      v-for="(item,index)  in  tabs"
      :key="index"
      class="desc"
      :class="{'active':tabIndex==index}"
      @click="click(index,item.id)"
    >{{item.name}}</div>
  </scroll-view>
</div>
</template>

<script>
import wepy from '@wepy/core';
import mixins from '../mixins/login';
import * as apis from '../utils/apis.js';

wepy.page({
  mixins: [mixins],
  data: {
    tabIndex: 1,
    tabs: [
      { name: '职位申请', id: 1 },
      { name: '预约管理', id: 2 },
      { name: '面试管理', id: 3 },
      { name: '发送offer', id: 5 },
      { name: '待入职', id: 6 },
      { name: '结束', id: 7 },
      { name: '全部', id: 0 }
    ]
  },
  methods: {
    click(index, id) {
      if (index != this.tabIndex) {
        this.tabIndex = index;
      }
    }
  },
  created() {}
});
</script>
<config>
{
    navigationBarTitleText: '51招聘云',
    enablePullDownRefresh:false,
    usingComponents: {
      init: '~@/components/init',
      icon: '~@/components/icon',
      status: '~@/components/status',
      "van-icon": "module:vant-weapp/dist/icon/index",
      "van-button": "module:vant-weapp/dist/button/index",
       "van-tab": "module:vant-weapp/dist/tab/index",
      "van-tabs": "module:vant-weapp/dist/tabs/index",

    }
}
</config>

之前用了插件，有很多问题，后来干脆就自己手写了