自定义可滑动的segmented 分段器

<template>
  <view class="team-pact">
    <scroll-view class="segmented" :show-scrollbar="true" :scroll-x="true">
      <view :style="{color:crtWorkshop==item?'#8A28A9':'#111111'}" class="segmented-item" @click="itemClick(item)"
        v-for="item in itemList">{{item}}</view>
    </scroll-view>
  </view>
</template>
<script>
  export default {
    data() {
      return {
        itemList: ['选项1', '选项2', '选项3', '选项1', '选项2', '选项3', '选项1', '选项2', '选项3'],
        crtWorkshop: '选项1'
      };
    },

    methods: {
      itemClick(value) {
        this.crtWorkshop = value;
      }
    }
  };
</script>
<style lang="scss">
  .team-pact {


    .segmented {
      white-space: nowrap;
      width: 100%;
      display: flex;

      ::-webkit-scrollbar {
        width: 0;
        height: 0;
        color: transparent;
      }

      .segmented-item {
        padding: 20rpx;
        display: inline-block;
        text-align: center;
        font-size: 32rpx;
        color: #111111;
      }
    }


  }
</style>