页面效果如下，点击右侧的字母，可进行快速定位
代码如下：
<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技术乱弹，获取更多技术知识。
文章来源: https://blog.csdn.net/yin4302008/article/details/87910934