js实现做通讯录的索引滑动显示效果和滑动显示锚点效果-CTO智库

要实现通讯录的索引滑动显示效果和滑动显示锚点效果，可以按照以下步骤进行操作：

1. 准备工作

首先，需要准备数据及页面布局。比如，我们可以根据姓名的拼音首字母来进行分类，将每个拼音首字母作为一个类别，同时将对应的姓名数据添加在该类别下。然后，我们需要在页面上展示这些数据，并实现拼音首字母索引的滑动效果。

在 HTML 页面中，可以按照如下结构布局：

其中，index-bar 是拼音首字母索引栏，contact-list 是联系人列表栏，每个 ul 标签是一个大类别，li 标签是具体的联系人信息。这里使用类名为 A、B、C 等来与索引栏中的链接一一对应。

2. 实现拼音首字母索引的滑动效果

为了实现滑动索引功能，需要对索引栏进行事件绑定，具体步骤如下：

在 JavaScript 中获取索引栏的 ul 元素和 li 元素。
遍历 li 元素，获取其 href 属性值，将其存储作为一个数组。
给每个 li 元素绑定一个 click 事件，点击时根据 href 属性值来跳转到对应的大类别 ul 标签中。
给索引栏 ul 绑定一个 touchstart 事件，当用户开始触摸时，获取 touchstart 的触点位置，并计算当前位置应该在哪一个索引位置，并将该位置得到 li 标签样式高亮。
给索引栏 ul 绑定一个 touchmove 事件，当用户滑动时，根据触点位置计算当前位置应该在哪一个索引位置，并将该位置得到 li 标签样式高亮。需要注意的是，在 touchmove 事件中需要使用 event.preventDefault() 阻止页面的默认滚动行为。
给索引栏 ul 绑定一个 touchend 事件，当用户停止触摸时，将得到高亮样式的 li 标签的索引位置作为参数，计算应该滚动到哪一个大类别的位置，并使用 animate 进行页面滚动。

下面是代码示例：

// 获取索引栏的 ul 元素和 li 元素
var indexBar = document.querySelector('.index-bar');
var indexLinks = document.querySelectorAll('.index-bar li a');

// 给每个 a 标签绑定 click 事件
for (var i = 0; i < indexLinks.length; i++) {
   indexLinks[i].addEventListener('click', function (event) {
      // 取消页面默认事件
      event.preventDefault();

      var href = this.getAttribute('href');
      var target = document.querySelector(href);
      var position = target.offsetTop;
      // 通过 animate 实现滚动效果
      $('html, body').animate({ scrollTop: position }, 300);
   });
}

// 给索引栏 ul 元素绑定 touch 事件
indexBar.addEventListener('touchstart', function (event) {
    event.preventDefault();
    var touches = event.touches[0];
    var index = Math.floor((touches.pageY - this.offsetTop) / 15);
    // 获取对应的 li 标签，并设置样式高亮
    indexLinks[index].classList.add('active');
});

indexBar.addEventListener('touchmove', function (event) {
    event.preventDefault();
    var touches = event.touches[0];
    var index = Math.floor((touches.pageY - this.offsetTop) / 15);
    // 获取对应的 li 标签，并设置样式高亮
    indexLinks[index].classList.add('active');
    // 取消之前已经高亮的 li 标签样式
    for (var i = 0; i < indexLinks.length; i++) {
        if (i !== index) {
            indexLinks[i].classList.remove('active');
        }
    }
});

indexBar.addEventListener('touchend', function (event) {
    event.preventDefault();
    // 获取最后一次高亮的 li 标签的索引位置
    var index = -1;
    for (var i = 0; i < indexLinks.length; i++) {
        if (indexLinks[i].classList.contains('active')) {
            index = i;
            break;
        }
    }
    // 计算应该滚动到哪一个大类别的位置
    var target = document.querySelector(indexLinks[index].getAttribute('href'));
    var position = target.offsetTop;
    // 通过 animate 实现滚动效果
    $('html, body').animate({ scrollTop: position }, 300);
});

3. 实现滑动显示锚点效果

在滑动时，可以让字母锚点逐渐显现，从而提高交互体验。实现方法如下：

定义一个 activeIndex 变量，记录正在高亮显示的链接对应的字母索引位置。
在 touchmove 事件中，根据触点距离计算当前的字母索引位置，如果该位置与 activeIndex 相等，则不需要进行任何操作，否则更新 activeIndex 变量。

代码示例如下：

// 定义 activeIndex 变量，记录正在高亮显示的链接对应的字母索引位置
var activeIndex = -1;

indexBar.addEventListener('touchmove', function (event) {
    event.preventDefault();
    var index = Math.floor((event.touches[0].pageY - this.offsetTop) / 15);
    if (index !== activeIndex) {
        activeIndex = index;
        // 展示 activeIndex 对应的字母锚点
        $('.index-bar a').removeClass('active').eq(activeIndex).addClass('active');
    }
});

这样，在滑动时，就可以实现字母锚点的逐渐显现效果。

至此，完成了通讯录的索引滑动显示效果和滑动显示锚点效果的实现。