页面效果如下，点击右侧的字母，可进行快速定位

代码如下：

<template>
  <div class="addressBook">
    <div class="addressBook-search">
      <van-search v-model="searchData.salesmanName" placeholder='输入搜索内容' @search="onSearch" show-action ></van-search>
    </div>
    <div class="list-item" style="position: relative;">
      <ul class="shuli">
        <li class="search-item" v-for="(item, index) in listFirstPinyin" :key="index" @click="jump(index)">{{item}}</li>
      </ul>
      <div v-for="(item, index) in listData" :key="index" class="section">
        <div class="pingyin" :id="item.name">{{item.name}}</div>
        <div class="item commonPadding" v-for="(subItem, index) in item.value" :key="index" v-on:click="phoneCall(subItem.salesmanMobile)">
          <div class="item-l">
            <img class="salesmanImg" v-show="subItem.headimgurl" :src="subItem.headimgurl">
            <img class="salesmanImg" v-show="!subItem.headimgurl" src="../../assets/images/ic_touxiangkong.png">
          </div>
          <div class="item-c">
            <span class="item-title">{{subItem.salesmanName}}</span>
            <span :class="subItem.dutyClass">{{subItem.duty}}</span>
          </div>
          <div class="phone">{{subItem.salesmanMobile}}</div>
        </div>
      </div>
      <div class="noImg" v-if="listData.length === 0">
        <img src="../../assets/images/ic_morentu.png"><br>
        暂无数据
      </div>
    </div>
  </div>
</template>
<script>
import api from '../../api/work'
import { Button, Field, CellGroup, Row, Col, Icon, Search, Popup } from 'vant'
import 'vant/lib/button/style'
import vPinyin from '../../utils/vue-py'
import $ from 'jquery'
export default {
  components: {
    [Button.name]: Button,
    [Field.name]: Field,
    [CellGroup.name]: CellGroup,
    [Row.name]: Row,
    [Col.name]: Col,
    [Icon.name]: Icon,
    [Search.name]: Search,
    [Popup.name]: Popup
  },
  data () {
    return {
      scroll: '',
      isFilter: false,
      customTypeSelect: -1,
      hTypeSelect: -1,
      listData: [

      ],
      listFirstPinyin: [

      ],
      searchData: {
        salesmanName: ''
      }
    }
  },
  created () {
    var that = this
    document.title = '通讯录'
    that.addressBook()
  },
  methods: {
    // 登录调用接口方法
    addressBook () {
      var that = this
      var searchData = {
        salesmanName: that.searchData.salesmanName
      }
      api.getAddressBook(searchData).then(res => {
        if (res.code === 200) {
          that.listData = []
          that.listFirstPinyin = []
          var resData = res.data
          var salesmanMap = new Map()
          // 构造通讯录数据格式
          resData.forEach((item, index) => {
            console.log(item.salesmanName)
            let salesmanName = item.salesmanName
            let firstPinyin = ''
            if (salesmanName !== '') {
              item['salesmanName'] = salesmanName.substring(0, 1)
              let namePinyin = vPinyin.chineseToPinYin(salesmanName.substring(0, 1))
              firstPinyin = namePinyin.substring(0, 1).toUpperCase()
            }
            item['salesmanMobile'] = '18999999999'
            item['firstPinyin'] = firstPinyin
            // 职务的样式和数据绑定
            if (item['duty'] === '大区经理') {
              item['dutyClass'] = 'districtManager'
            } else if (item['duty'] === '省区经理') {
              item['dutyClass'] = 'provincialManager'
            } else if (item['duty'] === '区域经理') {
              item['dutyClass'] = 'regionalManager'
            }
            let salesmanData = []
            //  构造key为业务员名字首字母 value为业务员工列表的map对象
            if (salesmanMap.has(firstPinyin)) {
              salesmanData = salesmanMap.get(firstPinyin)
              salesmanData.push(item)
              salesmanMap.set(firstPinyin, salesmanData)
            } else {
              salesmanData.push(item)
              salesmanMap.set(firstPinyin, salesmanData)
            }
          })
          //  构造name：业务员名字首字母  value:业务员工列表数据 json对象数组
          for (let [key, value] of salesmanMap.entries()) {
            var jsonData = {}
            jsonData['name'] = key
            jsonData['value'] = value
            that.listData.push(jsonData)
            that.listFirstPinyin.push(key)
          }
        } else {
          that.common.toast(res.message)
        }
      })
    },
    phoneCall: function (msg) {
      window.location.href = 'tel:' + msg
    },
    // 搜索事件
    onSearch () {
      var that = this
      that.addressBook()
    },
    jump (index) {
      let jump = document.getElementsByClassName('section')
      // 获取需要滚动的距离
      let total = jump[index].offsetTop
      // Chrome
      document.body.scrollTop = total
      // Firefox
      document.documentElement.scrollTop = total
      // Safari
      window.pageYOffset = total
      $('html, body').animate({'scrollTop': total
      }, 400)
    },
    loadSroll: function () {
      var self = this
      var $navs = $('.search-item')
      var sections = document.getElementsByClassName('section')
      for (var i = sections.length - 1; i >= 0; i--) {
        if (self.scroll >= sections[i].offsetTop) {
          $navs.eq(i).addClass('current').siblings().removeClass('current')
          break
        }
      }
    }
  },
  watch: {
    scroll: function () {
      this.loadSroll()
    }
  },
  mounted () {
    window.addEventListener('scroll', this.dataScroll)
  }
}
</script>

<!-- Add 'scoped" attribute to limit CSS to this component only -->
<style lang="less">


  .addressBook{
    .addressBook-search{
      .van-search--show-action {
        padding-right: 0;
      }
      .van-search {
        background:#fff !important;
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        padding: 10px 15px;
        -webkit-box-align: center;
        -webkit-align-items: center;
        align-items: center;
        box-sizing: border-box;
      }
      .van-search .van-cell {
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        flex: 1;
        padding: 3px 10px;
        border-radius: 17px;
        width: 100%;
        display: flex;
        box-sizing: border-box;
        line-height: 24px;
        position: relative;
        background-color: #f5f5f5;
        color: #cccccc;
        font-size: 14px;
        overflow: hidden;
      }
      .van-field__control {
        border: 0;
        margin: 0;
        padding: 0;
        width: 100%;
        resize: none;
        display: block;
        color: #323233;
        box-sizing: border-box;
        background-color: transparent;
      }
      input::-webkit-input-placeholder {
        color: #808080
      }
      .van-search__action{
        margin-left: 10px;
        color: #808080;
        .icon-shaixuan:before{
          font-size: 2rem;
          color: #808080
        }
        .icon-shaixuan.active:before {
          color: #2a8dfd
        }
        span{
          position: relative;
          top: -2px;
        }
        span.active{
          color: #2a8dfd
        }
      }
    }

    .list-item{
      ._v-container{
        height: calc(100% - 54px) !important;
        top: 54px;
      }
      .item{
        height: 67px;
        background: #ffffff;
        padding: 0px;
        margin: 0px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
        .item-l {
          float: left;
          width: 57px;
          height: 35px;
          /*background: #54aaef;*/
          text-align: center;
          color: #fff;
          border-radius: 9px;
          padding: 18px 0 6px 5px;
          .icon-mendian:before,.icon-daili:before{
            font-size: 4rem
          }
        }
        .item-r{
          float: right;
          margin-top: 5px;
          .icon-qianglie:before {
            font-size: 6rem;
            color: #fe7f40;
          }
          .icon-jiaohao:before {
            font-size: 6rem;
            color: #feb144;
          }
          .icon-yiban:before {
            font-size: 6rem;
            color: #4ccbfa;
          }
        }
        .item-t{
          color: #808080;
          border-bottom: 1px solid #f5f5f5;
          padding-bottom:5px;
          .item-l{
            float: left;
            display: contents;
            font-size: 1.4rem;
          }
          .item-r{
            float: right;
            font-size: 1.5rem;
          }
        }
        .item-c{
          padding-top: 5px;
          padding-bottom: 5px;
          margin-top: 9px;
          /* font-size: 1.5rem; */
          float: left;
          width: 10%;
          .item-title{
            color: #4d4d4d;
            font-size: 11px;
            line-height: 2rem;
            height: 15px;
            width: 15rem;
            font-family: Microsoft YaHei;
          }
          .item-span{
            color: #cccccc;
            font-size: 1.3rem;
            width: 90%;
            height: 15px;
            line-height: 15px;
          }
          span{
            display: inline-block;
          }
        }
        .item-detail{
          text-align: right;
        }
      }
    }
    .van-popup--top {
      position: fixed;
      color: #000;
      width: 100%;
      border-radius: 0;
      line-height: 20px;
      background-color:#fff;
      height: 245px;
      border-top: 1px solid #f5f5f5;
    }
    .van-overlay{
      top:50px;
      background-color: rgba(0,0,0,0.3);
    }
    .tag{
      padding: 20px 12px 5px 12px;
      color: #b3b3b3;
      span{
        border: 1px solid #bfbfbf;
        color: #bfbfbf;
        padding: 5px 13px;
        margin: 13px 13px 13px 0;
        display: inline-block;
        background: #fff
      }
      span.action{
        border: 1px solid #2a8efe;
        color: #2a8efe;
        background: #f4faff
      }
    }
    .bot-btn{
      border-top: 1px solid #f5f5f5;
      padding: 15px 12px;
      span{
        float: right;
        padding: 5px 14px;
        color: #fffefb;
        background:#2a8efe;
        border-radius: 3px;
        border: 1px solid #2a8efe;
      }
      span:first-child{
        float: left;
        border: 1px solid #666666;
        color: #666666;
        background:#fff
      }
    }
    .shuli{
      width: 10px;
      line-height: 16px;
      border: 1px solid #333333;
      word-wrap: break-word;
      opacity: 0.6;
      right: 1px;
      padding-top: 6rem;
      border-style: none;
      margin-right: 1rem;
      position:fixed;
    }
    .telephone{
      text-align:right;
      margin-right:45px;
      padding-top:25px;
    }
    //大区经理样式
    .districtManager{
      width: 50px;
      padding:0px 8px;
      border-radius:20px;
      background:#ffb94d;
      color:#FFF;
      font-size: 11px;
      font-family: Microsoft YaHei;
    }
    //省区经理样式
    .provincialManager{
      width: 50px;
      padding:0px 8px;
      border-radius:20px;
      background:#40E37d;
      color:#FFF;
      font-size: 11px;
      font-family: Microsoft YaHei;
    }
    //区域经理样式
    .regionalManager{
      width: 50px;
      padding:0px 8px;
      border-radius:20px;
      background:#6cd8fb;
      color:#FFF;
      font-size: 11px;
      font-family: Microsoft YaHei;
    }
    .phone{
      text-align: right;
      margin-right: 45px;
      padding-top: 25px;
      color: #b3b3b3;
      font-size: 13px;
      font-family: Microsoft YaHei;
    }
    .salesmanImg{
      border-radius:20px 20px 20px 20px;
      width: 38px;
      height: 38px;
    }
    .pingyin{
      margin-left: 10px;
      height: 33px;
      line-height: 33px
    }
    .search-item{
      line-height: 2rem;
      padding-left: 0.2rem;
    }
    .current {
      color: #fff;
      background: red;
    }
  }
</style>

感兴趣的朋友，可以发表评论与我进行交流，也可以关注我的公众号：IT技术乱弹，获取更多技术知识。