最近公司项目需要做一个类似iphone通讯录的索引栏功能，可以快速定位搜索。项目使用的UI库是VANT，但是当初找对应功能的时候没有仔细看。我以为它不存在，所以我徒手做了一个。可以给大家做一个参考，也可以供自己以后的回顾和优化。除了图片中的搜索和快速定位，按下后在UI上增加了一个问题提示图标，无形中增加了一些开发工作量。但从设计上来说，确实是一个用户体验很好的功能。了解需求后，接下来就是开始开发功能了！首先我把页面的功能分为五个步骤，如下图所示。首先是最简单的城市搜索功能，和普通的搜索功能差不多，但是这个搜索功能需要跳转到新的页面进行搜索，就不过多描述了。我这里用blur来控制。第二部分为开发页城市索引标题。城市的数据是百度上百度下载的。联调等待后台联调界面后，改为动态数据。目前的数据格式大致是这样的{"title":"A","lists":["阿坝","阿拉善","阿里","安康","安庆","鞍山","安顺",“安阳”，“澳门”]}，这里我在写页面的时候给每个title分配了一个id，id对应他的title，后面会用id跳转到对应的内容栏目{{item.title}}然后是侧边栏功能。首先写侧边栏的页面内容和样式。另外，先给提示功能加上图标，现在开始写js。首先，我想先写触摸事件。这里是使用三个touch兄弟startmoveend。第一个是获取start的起始位置e.touches[0].clientYclient在事件触发时返回鼠标指针到浏览器页面（客户区）的垂直坐标。客户区指的是当前窗口。拿到第一个位置后，就需要写移动事件的内容了。现在您有了起始位置，您需要计算它的移动距离。这里我使用移动位置clientY-起始位置。这时候，你就可以算出自己到底移动了多远。e.touches[0].clientY-this.startIndex;但是这些只是前期工作，因为我在移动端用的就是这个，而且我用的是响应式布局，单位是rem。所以在计算距离的时候需要进行单位换算，因为浏览器显示最后显示的单位是px。为了更好的理解，我先贴出我的每一个方法的代码，然后稍微分析一下它的功能。this.startIndex=e.touches[0].clientY;this.normalIndex=((e.touches[0].clientY-20)*2)/100;this.iconIndex=((e.touches[0].clientY*2/100)-3)/0.32;this.iconMoveIndex(this.iconIndex);这个。显示=真；this.$refs.pic.style.top=this.normalIndex+'rem';document.body.style.overflow='隐藏';首先，startIndex是触摸的第一个起始位置，normalIndex是图标被触摸后的起始位置。由于UI要求，触摸时会显示图标。首先是从起始位置减去图标高度的一半，然后将减去的结果乘以2，乘以2的原因是我的globalresponsive设置为2倍，也是设计稿的2倍。也是为了方便写scss和单位换算。最后除以100就是px换算rem的单位计算。因为在点击的时候没有办法保证点击完全在右边indexbar元素的中间，所以看起来有点偏，但是在开发的时候保持显示的时候确实居中了。那么第三个iconIndex也是图标位置的计算，不过这个计算是为了它=当用户触摸起始位置时，显示图标，可以显示用户当前触摸的是哪个字母元素。首先是将起始位置的两倍除以100的单位换算成rem，再减去3，因为右边的字母索引栏距页面高度的距离是3rem。最后的结果除以0.32，0.32就是右边字母索引栏的高度+边距。最后的结果是通过iconMoveIndex()方法计算出哪个字母在范围内。/*检测开始和结束位置*/iconMoveIndex(item){letindex=Math.round(item);this.iconText=this.navList[索引];}，this.show是控制图标的显示和隐藏，大家应该能看懂，这里就不多说了。然后就是设置图标的显示位置，话不多说，传document.body.style.overflow='hidden';这个设置是因为页面滑动的时候也会滑动，所以做这个设置来控制。接下来说一下move方法的内容this.moveIndex=e.touches[0].clientY-this.startIndex;letlen=this.navList.length;让高度=len*20+(len*12);令step=this.normalIndex+(this.moveIndex/100*2)-0.2;if(step>=((heights+266-32)/100)||step<=2.6){console.log('太长')}else{this.iconMoveIndex(((step-3+0.32)/0.32));this.$refs.pic.style.top=step+'rem';}moveIndex，计算移动距离。len是侧面字母索引栏的长度；heights是侧边栏的总长度（包括底部边距）；step为图标的实际位置加上换算单位的移动距离，再减去图标高度的一半。接下来的判断是为了防止用户判断超出第一个或最后一个字母的距离。效果和下图中的方法和设置位置是一样的。最后是end方法的内容。document.body.style.overflow='自动';this.show=false;这个.scrollTops();这里很简单，恢复body的far设置，然后设置图标隐藏，然后调用scrollTops()的方法跳转到当前页面。把跳转代码贴在这里/*获取选中的字母标记和浏览器之间的距离*/scrollTops(){leten=document.getElementById(this.iconText);letfar=en.offsetTop;this.$nextTick(()=>{document.documentElement.scrollTop=far;});}首先是获取需要跳转的标签的对象属性。然后从浏览器获取标签的高度。最后在页面上设置scrollTop进行跳转。这里需要Document.documentElement.scrollTop。如果你直接使用document.body.scrollTop，你会发现它不会生效。终于通过万能的度娘，找到了一个我觉得比较容易接受的解释。获取当前页面滚动条的垂直坐标位置，使用：document.documentElement.scrollTop;而不是：document.body.scrollTop；documentElement对应html标签，body对应body标签。在标准w3c下，document.body.scrollTop始终为0，需要改用document.documentElement.scrollTop；如果你想定位鼠标相对于页面的绝对位置，你会发现Google1000篇文章中有999.99篇会让你使用event.clientX+document.body.scrollLeft,event.clientY+document.body.scrollTop，如果您发现您的鼠标定位与您的想象有偏差，请不要感到意外，这是很正常的事情。ie5.5后不再支持document.body.scrollX对象。原文出处：CSDN博主
