vue+ts实现手机通讯录，左右联动，吸顶效果

最开始使用 vant 的 IndexBar 组件，遇到了难以处理的样式bug，即点击索引锚点吸顶后搜索框被向上挤压，所以就想着自己写一个

•  效果图如下：

• 以下是全部代码：

<template>
  <div v-allSafeArea class="page">
    <Header :isBack="false" bgColor="linear-gradient(180deg, #F5F5F5 0%, rgba(255, 255, 255, 1) 100%)">
      <template slot="right">
        <van-popover v-model="showPopover" trigger="click" :actions="actions" placement="bottom-end" @select="onSelect">
          <template #reference>
            <div class="sw-item">
              {
  { checkedText }}
              <SvgIcon icon="arrow_dot"></SvgIcon>
            </div>
          </template>
        </van-popover>
      </template>
    </Header>
    <div class="top-view">
      <SearchView v-model="nickName" placeholder="搜索" />
      <div class="box"></div>
    </div>
    <!-- 固定结构 container为滚动区域，content为滚动内容 -->
    <div class="wrap-view">
      <div ref="container" class="container" @scroll="scrollTop">
        <div ref="content">
          <div v-for="(item, index) in contacts" :key="index" class="list">
            <div ref="titleRef" :class="{ 'list-title': true, 'active-title': activeTitle === item.letter }">
              {
  { item.letter }}
            </div>
            <div v-for="({ name, phone, venues, jobName }, i) in item.list" :key="i&#