vue点击右侧字母滑动（锚点）&对数组进行排序

点击右侧字母滑动（锚点）对数组进行排序
实现效果：

<div id="div" class="view view-quick-home" ref="groupRef">
    <div class="word-list" ref="wordList">
      <div v-for="(item, index) in List" :key="index">
        <span @click="goIndex(item, index)">{{ item.letter }}</span>
      </div>
    </div>
    <div class="group-list-container">
      <div class="group-list" v-for="(item, index) in List" :key="index">
        <div class="list-title" ref="titleRef">
          <span>{{ item.letter }}</span>
          <div class="list-content">
            <div v-for="(item1, index) in item.data" :key="index">
              {{ item1.bankCard }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

import smoothscroll from 'smoothscroll-polyfill';
smoothscroll.polyfill();
data:{
	return(){
		Arr:[],
		List :[]
	}
}
mounted() {
    // 设置位置
    this.setListIndexPos();
    
   this.List = this.pySegSort(this.Arr);
  },
// 中文排序
    pySegSort(arr) {
      if (!String.prototype.localeCompare) return null;
      const letters = 'ABCDEFGHJKLMNOPQRSTWXYZ'.split('');
      const zh = '阿八嚓哒妸发旮哈讥咔垃痳拏噢妑七呥扨它穵夕丫帀'.split('');
      const segs = [];
      letters.map((item, i) => {
        const cur = { letter: item, data: [] };
        arr.map((item) => {
          if (item.bankCard.localeCompare(zh[i]) >= 0 && item.bankCard.localeCompare(zh[i + 1]) < 0) {
            cur.data.push(item);
          }
        });
        if (cur.data.length != 0) {
          cur.data.sort(function (a, b) {
            return a.bankCard.localeCompare(b.card, 'zh');
          });
          segs.push(cur);
        }
      });
      return segs;
    },
    // 点击右侧字母滚动
    goIndex(params, index) {
      const groupRef = this.$refs.groupRef;
      const titleRef = this.$refs.titleRef;
      if (titleRef[index].children[0].innerText === params.letter) {
        this.$nextTick(() => {
          groupRef.scrollTo({
            top: titleRef[index].offsetTop,
            behavior: 'smooth', // 平滑移动
          });
        });
      }
    },
     // 两个方法都可以实现点击右侧字母滚动
    setScroll(ev) {
      const aP = this.$refs.groupRef.getElementsByTagName('span');
       for(let i = 0;i<aP.length;i++){
       if(aP[i].innerHTML === ev.target.innerHTML){
           document.body.scrollTop = aP[i].offsetTop;
        }
      },
    // 设置右侧字母居中
    setListIndexPos() {
      const iH = this.$refs.wordList.offsetTop;
      this.$refs.wordList.style.top = iH * 2 + 'px';
    },
    
    },
<style>
	#div{
  height: 100vh;// 高度非常重要
  background: #f2f2f5;
  padding: 30px 30px 40px;
  text-align: left;
  overflow-x: hidden;
  overflow-y: scroll;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;

  .word-list {
    position: fixed;
    right: 20px;
    top: 14%;

    div {
      font-size: 24px;
      color: #666666;
      letter-spacing: 0;
      text-align: center;
      line-height: 60px;
    }
  }

  .group-list-container {
    // height: 100%;
    // overflow: auto;
    // flex: 1;
    overflow-x: hidden;
    overflow-y: scroll;

    .group-list {
      .list-title {
        span {
          display: inline-block;
          padding: 20px 0;
        }

        font-size: 26px;

        .list-content {
          font-size: 28px;
          background: #FFFFFF;
          border-radius: 20px;
          padding: 0 30px;

          div {
            padding: 30px 0;
            border-bottom: 1px solid #f2f1f3;
          }

          div:last-child {
            border-bottom: 1px solid transparent;
          }
        }
      }
    }
  }
}
</style>