vue3项目自动定位横向滚动到指定位置

<template>
  <div>
    <div>我是Page1的组件</div>
    <div class="wrap" id="wrapId">
      <div
        class="item"
        v-for="(item, index) in goodsTypesList"
        :key="index"
        :id="`tabs${item.goodsTypeId}`"
      >
        {{ item.goodsTypes }}
      </div>
    </div>
  </div>
</template>
<script>
import {
  defineComponent,
  ref,
  onMounted,
  getCurrentInstance,
  nextTick,
} from "vue";
import CommonHeader from "../components/CommonHeader.vue";
import CommonAside from "../components/CommonAside.vue";
export default defineComponent({
  setup() {
    const { proxy } = getCurrentInstance();
    const goodsTypesList = ref([]);
    const getCountData = async () => {
      let res = await proxy.$api.getAllTypes();
      goodsTypesList.value = res;
      nextTick(() => {
        tabStyle();
      });
    };

    function tabStyle() {
      const tabsId = document.getElementById("tabs7");
      const wrap = document.getElementById("wrapId");
      const width = tabsId.getBoundingClientRect().width;
      wrap.scrollLeft = (width + 10) * 6;
    }
    onMounted(() => {
      getCountData();
    });
    return {
      getCountData,
      goodsTypesList,
    };
  },
  components: {
    CommonHeader,
    CommonAside,
  },
});
</script>
<style lang="less" >
.wrap {
  display: flex;
  width: 300px;
  overflow-x: scroll;
  white-space: nowrap;
  .item {
    margin-right: 10px;
  }
}
</style>