导航栏滑动自动居中（移动端）vue+原生js

vue加原生js实现移动端导航滑动自动居中，本人将它封装成了组件可供调用：

1.tabNav.vue组件：

<template>
  <div
    class="scroll-nav"
    ref="scrollNav"
    :style="scrollWay == 'vertical' ? {'height': (navWH == 0 ? '100%' : navWH + 'px'),'background-color': colorBack,'color': colorText,'justify-content': scrollWH < navWH ? 'center' : ''} : {'width': (navWH == 0 ? '100%' : navWH + 'px'),'background-color': colorBack,'color': colorText,'justify-content': scrollWH < navWH ? 'center' : ''}"
  >
    <div
      class="scroll-box"
      ref="scrollBox"
      :style="scrollWay == 'vertical' ? {'transform': 'translate3d(0px,' + xyScroll + 'px,0px)','height': scrollWH + 'px','flex-direction': 'column'} : {'transform': 'translate3d(' + xyScroll + 'px,0px,0px)','width': scrollWH + 'px','flex-direction': 'row'}"
    >
      <div
        class="scroll-item"
        @click="chooseItem($event,index)"
        :class="index == activeIndex ? 'item-active' : ''"
        v-for="(item,index) in dataArr"
        :key="index"
        :style="scrollWay == 'vertical' ? {'margin': scrollMargin + 'px' + ' 0','padding': itemPadding,'color': index == activeIndex ? colorActiveText : '','background-color': index == activeIndex ? colorActiveBack : ''} : {'margin': '0 ' + scrollMargin + 'px','padding': itemPadding,'color': index == activeIndex ? colorActiveText : '','background-color': index == activeIndex ? colorActiveBack : ''}"
      >{
  {item[itemStr]}}</div>
    </div>
  </div>
</template>
<script>
export default {
  name: "tabNav",
  data() {
    return {
      dataNum: [],
      deviceWH: 0,
      xyScroll: 0,
      oldxyScroll: 0,
      scrollWH: 0,
      scrollNav: {},
      scrollBox: {},
      scrollItemArr: [],
      startPointer: 0,
      movePointer: 0,
      endPointer: 0,
      useNavWH: 0,
      initinval: {},
      stepIntval: {},
      activeIndex: this.activeIndexParent
    };
  },
  props: {
    activeIndexParent: {
      type: Number,
      required: false,
      default: 0
    },
    colorText: {
      type: String,
      required: false,
      default: '#222'
    },
    colorBack: {
      type: String,
      required: false,
      default: 'whitesmoke'
    },
    colorActiveText: {
      type: String,
      required: false,
      default: '#fff'
    },
    colorActiveBack: {
      type: String,
      required: false,
      default: '#999'
    },
    dataArr: {
      type: Array,
      required: true
    },
    navWH: {
      type: Number,
      required: false,
      default: 0
    },
    scrollMargin: {
      type: Number,
      required: false,
      default: 0
    },
    scrollWay: {
      type: String,
      required: false,
      default: "horizontal"
    },
    itemPadding: {
      type: String,
      required: false,
      default: "5px 10px"
    },
    itemStr: {
      type: String,
      required: false,
      default: ""
    }
  },
  watch: {
    dataArr: function(newValue, oldValue) {
      if (newValue != oldValue) {
        t