实现微信通讯录的前端动效

最近公司要是实现一个类似于微信通信录的品牌列表，于是自己动手实现了这个功能，这里主要讲的是如何通过手指滑动，来实现列表页面的滚动。
如果是通过点击给实现页面的滚动，大家基本上都能实现，甚至不用js就可完成，所以这里就不细讲了。重点将如何通过touch事件完成这个功能。首先你得了解touch事件,有touchstart,touchmove,touchend…具体怎么用大家google一下就明白了，实现我要讲的功能需要用到touchmove事件。
首先你得有一个思路：
①监听手指滑动的事件
②获取手指滑动经过的dom元素
③将页面滚动到预期的位置
其中①和③并不难，难点在于②，touch事件的target，targetTouches，changeTouches等等都可以个获得dom元素，但是只是你手指第一次碰触的dom元素，而没有动态的获取dom元素。所以这里要用到document.elementFromPoint()方法，具体细节大家Google吧。它的主要功能是可以根据页面的坐标点获取dom元素，而通过target，targetTouches，changeTouches等事件均可以获取手指在屏幕上的坐标点，所以我们可以根据这个来获取dom元素。但是这里有一个前提，就是元素必须是最高层级，不然获取的元素会错误。所以大家可以通过这种方法来实现微信通信录手指滑动的特效。
注意：
①touch是冒泡事件，有默认滚动行为，所以你要禁止。
②最好不要用name或id在页面直接跳转，最好使用jquery的animate方法，提高用户体验。
③我们知道锚点与页面是分离的，所以我们可以使用data来保存对应滚动标题的属性，例如标题的name=”title1”,锚点的data-name=”title1”这样使用getAttribute()获得属性值，直接用于getElementsByName()获取标题元素了。
④使用stop()取消未完成的动画，因为手机上操作快而且频繁，所以要及时清理未完成的动画。
下面就是我的代码：
html:

extends layout
block style
link(rel='stylesheet', href='/stylesheets/brandList.css')
block content
div#brandsList
ul.brands(v-for="(value,key) in brands",:key="brand")
a(:name="'anchor'+key")
li.brand-name {{key}}
ul.brands-value(v-for="brand in value",:key="brand")
li.brand-value {{brand}}
ul#anchors
li.anchor(v-for="(value,key) in brands",:key="brand")
a(:data-name="'anchor'+key", href="#", @click.prevent="moveTarget") {{key}}
block localScripts
script(type="text/javascript", charset="UTF-8", src="/javascripts/brandList.js")

样式表

#brandsList{
  .brands{
    position: relative;
    z-index: 1;
    .brand-name{
      background-color: #00343f;
      color: #37C6C0;
      font-size: 0.96rem;
      line-height: 1.5em;
      border-top: 1px solid #000;
      border-bottom: 1px solid #000;
      .brands-value{
        .brand-value{
          background-color: #D0E9FF;
          color: #1DB0B8;
          font-size: 0.8rem;
          height: 1.6rem;
          line-height: 2em;
          border-bottom: 1px solid #808080;
          text-indent: 1rem;
        }
      }
    }
  }
}

#anchors{
  position: fixed;
  right: 0;
  top: 10%;
  width: 20%;
  z-index: 10000;
  background-color: rgba(255,255,255,0);
  text-align: center;
  .anchor{
    font-size: 0.64rem;
    line-height: 2.5em;
    a{
      display: block;
    }
  }
}

js

$(function () {
    let _brands = {
        "A": ["A2729", "A82342", "A30571", "A62392", "A18932", "A76985", "A79365", "A52735", "A45987", "A91424", "A39607", "A13176", "A87003", "A62996", "A30443", "A70704", "A40939", "A37988", "A73448", "A23951", "A53396", "A38539", "A52889", "A15415", "A44038", "A71120", "A68133", "A81421", "A96483", "A54518"],
        "B":["B83270", "B42963", "B50996", "B67102", "B49792", "B50410", "B27231", "B39676", "B10437", "B93032", "B52422", "B28576", "B32741", "B20836", "B62905", "B26254", "B31963", "B41469", "B3125", "B64037", "B92490", "B9764", "B52587", "B47649", "B27292", "B68895", "B63706", "B50151", "B51347", "B96811"],
        "C":["C35336", "C42606", "C34876", "C75762", "C8751", "C21268", "C16375", "C15210", "C75799", "C36229", "C45536", "C85392", "C81228", "C45028", "C90169", "C29729", "C82130", "C96756", "C51364", "C30303", "C34450", "C5163", "C7456", "C4049", "C88103", "C23467", "C7029", "C28718", "C4133", "C35084"],
        "D":["D84269", "D39996", "D79100", "D17309", "D11013", "D21868", "D12546", "D7330", "D19972", "D49256", "D11978", "D23436", "D57809", "D50161", "D20923", "D58507", "D87257", "D61811", "D86873", "D91171", "D3362", "D55114", "D31615", "D3889", "D13300", "D74478", "D98211", "D22860", "D92121", "D22704"],
        "E":["E11499", "E98787", "E35996", "E85602", "E34884", "E25026", "E73632", "E92804", "E39700", "E75324", "E45643", "E64724", "E83336", "E77670", "E14006", "E26683", "E74517", "E80758", "E21975", "E12868", "E36444", "E76599", "E74214", "E79114", "E54433", "E17754", "E91836", "E29932", "E28309", "E63646"],
        "F":["F28926", "F6006", "F466", "F41082", "F87270", "F34098", "F59916", "F63838", "F95163", "F72625", "F61074", "F94642", "F10362", "F65501", "F18417", "F29904", "F34258", "F72106", "F69078", "F60323", "F31849", "F22832", "F4116", "F14671", "F9932", "F18726", "F23917", "F78181", "F44676", "F69939"],
        "G":["G45368", "G95600", "G78955", "G70059", "G89713", "G14426", "G91937", "G65935", "G22184", "G69569", "G73084", "G15006", "G49610", "G66381", "G45706", "G81890", "G65954", "G19595", "G10472", "G68937", "G78373", "G20777", "G32810", "G62181", "G97213", "G76325", "G69330", "G92326", "G94747", "G80207"],
        "H":["H52425", "H48969", "H38242", "H0", "H5754", "H39394", "H63291", "H96319", "H83246", "H82005", "H3972", "H249", "H40870", "H54662", "H70716", "H30514", "H87456", "H54802", "H72949", "H74930", "H32563", "H40497", "H3494", "H78033", "H3496", "H85287", "H88108", "H35863", "H93651", "H13639"],
        "I":["I23585", "I75199", "I77543", "I10209", "I79574", "I6029", "I35459", "I93090", "I13345", "I84828", "I48177", "I36292", "I17198", "I99394", "I42830", "I46840", "I13719", "I27301", "I53095", "I2838", "I63461", "I24657", "I26294", "I6951", "I98004", "I26517", "I85996", "I84576", "I47202", "I97610"],
        "J":["J49652", "J81637", "J66454", "J55112", "J53440", "J32649", "J48244", "J45886", "J47059", "J44254", "J57691", "J30100", "J72307", "J25473", "J18048", "J46059", "J73885", "J65669", "J83742", "J42423", "J61102", "J73274", "J61876", "J6013", "J44991", "J85708", "J71407", "J38172", "J26429", "J41641"],
        "K":["K69951", "K88894", "K83232", "K55797", "K29804", "K5051", "K39474", "K15858", "K53544", "K26408", "K12546", "K96018", "K63600", "K86490", "K90686", "K83698", "K53335", "K60483", "K85597", "K59171", "K13177", "K73610", "K22131", "K9309", "K41200", "K53044", "K51720", "K3202", "K37759", "K24823"],
        "L":["L66397", "L81415", "L25813", "L22126", "L40777", "L30748", "L11060", "L229", "L69443", "L7113", "L60057", "L52618", "L20490", "L35345", "L13638", "L82365", "L9015", "L48390", "L62213", "L29238", "L27723", "L74685", "L6497", "L16514", "L46661", "L52649", "L74045", "L18857", "L79274", "L9233"]
    };
   let vueApp = new Vue({
       el: '#el',
       data: {
            brands: _brands
       },
       methods: {
           moveTarget: function (e) {
               let name = null,
                   obj = null,
                   _scrollTop = 0;
               name = e.target.dataset.name;
               obj = document.getElementsByName(name)[0];
               _scrollTop = $(obj).offset().top + 'px';
               console.log('_scrollTop:', _scrollTop);
               $('html,body').stop(true).animate({
                   scrollTop: _scrollTop
               }, 400);
           }
       }
   });

    (function () {
      let anchorObjs = document.querySelectorAll('#anchors .anchor');
      for (let i = 0,len = anchorObjs.length; i < len; i++) {
          anchorObjs[i].addEventListener('touchmove', handleTouchEvent, false);
      }
      function handleTouchEvent (e) {
          e.preventDefault();
          let name = null,
              obj = null,
              _curObj = null,
              _dataName = null,
              _scrollTop = 0,
              _clientX = 0,
              _clientY = 0;
          name = e.targetTouches[0].target.dataset.name;
          _clientX = e.targetTouches[0].clientX;
          _clientY = e.targetTouches[0].clientY;
          _curObj = document.elementFromPoint(_clientX, _clientY);
          _dataName = _curObj.getAttribute('data-name');
          console.log('name:', name);
          console.log('_dataName:', _dataName);
          if (name===_dataName) {
              return false;
          }
          obj = document.getElementsByName(_dataName)[0];
          _scrollTop = $(obj).offset().top + 'px';
          console.log('_scrollTop:', _scrollTop);
          $('html,body').stop(true, true).animate({
              scrollTop: _scrollTop
          }, 200);
      }
    }());
});