vue2/3 tab栏切换 可左右滑动的处理

<template>
 <div class="lose posr">
      <!-- <span class="af"></span> -->
    <div class="tab-layout" id="scroller">
      <ul v-for="(tab, idx) in tabList" :key="idx" class="ul">
        <li
          class="tab-item"
          @click="onClickTab(tab, idx)"
        >
          <span :class="(curTabIndx == idx ? 'active':'')">{{ tab.text }}</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { defineComponent, computed, toRefs, reactive } from 'vue'
import { jsBridge } from "@/utils/jsbridge";
export default defineComponent({
  name: 'Gooddetails',
  setup() {
    const lData = reactive({
      tabList: [],
      curTabIndx: 0
    })
    const curTab = computed(() => {
      return lData.tabList.find(v => v.select);
    })
    const _init = ()=> {
      let list = ["京东","淘宝/天猫/饿了么","美团外卖","拼多多"];
        list.forEach((text, idx) => {
          lData.tabList.push({
                text,
                id: idx, // tab标识
                select: idx == 0, // 是否被选择
                index: idx // 处于显示的位置
            });
        });
    }
    _init()
       const onClickTab = (tabInfo, idx) => {
          lData.curTabIndx = idx
            let curTabInfo = curTab.value;
            if (curTabInfo.id == tabInfo.id) return;
            let { index, id } = tabInfo;
            // 滑动控件
            let scroller = document.getElementById("scroller");
            let speed = scroller.scrollWidth / lData.tabList.length;
            let tab = document.getElementById(`tab-${id}`);
            let bWidth = document.body.clientWidth;
            // 点击右边
            if (curTabInfo.index < index && tab.clientWidth * index >= bWidth - speed) {
            // 滑动的距离
                scroller.scrollLeft = (index + 2) * speed - bWidth;
            } else if (curTabInfo.index > index && (tab.clientWidth * index - (scroller.scrollLeft + bWidth) < speed)) {
            // 滑动的距离
                scroller.scrollLeft = (index - 1) * speed;
            }

            curTabInfo.select = false;
            lData.tabList[index].select = true;
        }
    return { ...toRefs(lData), curTab, onClickTab }
  }

})
</script>

<style lang="scss" >
@import "../../assets/styles/common.css";

.lose {
    width: 100%;
    position: relative;
    overflow:hidden;
    .af{
      width: .48rem;
      height: .4rem;
      background-color: #f7f7f7;
      position: absolute;
      top: 0.32rem;
      left: 0;
      z-index: 2;
    }
  .tab-layout {
    overflow-x: scroll;
    display: flex;
    flex-wrap: nowrap;
    padding: .32rem 0 .28rem .48rem;
    position: relative;
    .ul:first-child{
        .tab-item{
          padding-left: 0;
        }
      }
    .tab-item {
      // min-width: 1rem;
      padding:0 .32rem;
      text-align: center;
      height: .4rem;
      font-size: .28rem;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #333333;
      line-height: .4rem;
      white-space: nowrap;
      span.active {
        border-bottom:1px solid red;
      }
     
    }
  }
}
</style>