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

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

1. 准备工作

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

在 HTML 页面中,可以按照如下结构布局:

<div class="contacts-wrapper">
  <div class="index-bar">
    <ul>
      <li><a href="#A">A</a></li>
      <li><a href="#B">B</a></li>
      <li><a href="#C">C</a></li>
      ...
    </ul>
  </div>
  <div class="contact-list">
    <ul class="A">
      <li>...</li>
      <li>...</li>
      ...
    </ul>
    <ul class="B">
      <li>...</li>
      <li>...</li>
      ...
    </ul>
    <ul class="C">
      <li>...</li>
      <li>...</li>
      ...
    </ul>
    ...
  </div>
</div>

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

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

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

  1. 在 JavaScript 中获取索引栏的 ul 元素和 li 元素。
  2. 遍历 li 元素,获取其 href 属性值,将其存储作为一个数组。
  3. 给每个 li 元素绑定一个 click 事件,点击时根据 href 属性值来跳转到对应的大类别 ul 标签中。
  4. 给索引栏 ul 绑定一个 touchstart 事件,当用户开始触摸时,获取 touchstart 的触点位置,并计算当前位置应该在哪一个索引位置,并将该位置得到 li 标签样式高亮。
  5. 给索引栏 ul 绑定一个 touchmove 事件,当用户滑动时,根据触点位置计算当前位置应该在哪一个索引位置,并将该位置得到 li 标签样式高亮。需要注意的是,在 touchmove 事件中需要使用 event.preventDefault() 阻止页面的默认滚动行为。
  6. 给索引栏 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. 实现滑动显示锚点效果

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

  1. 定义一个 activeIndex 变量,记录正在高亮显示的链接对应的字母索引位置。
  2. 在 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');
    }
});

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

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

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:js实现做通讯录的索引滑动显示效果和滑动显示锚点效果 - Python技术站

(0)
上一篇 2023年5月16日
下一篇 2023年5月16日

相关文章

  • 关于NoSQL之MongoDB的一些总结

    关于NoSQL之MongoDB的一些总结 什么是NoSQL? NoSQL是“Not only SQL”的缩写,表示非关系型数据库,它不像传统的关系型数据库(SQL)那样有严格的表结构和数据类型限制,相对灵活。 MongoDB是什么? MongoDB是一款比较流行的NoSQL数据库,它是一种文档存储数据库,可以存储各种复杂的文档类型,并且支持分布式部署。 Mo…

    MongoDB 2023年5月16日
    00
  • SpringBoot整合MongoDB的步骤详解

    下面就是 SpringBoot 整合 MongoDB 完整攻略: 概述 MongoDB 是一款文档型数据库,而 SpringBoot 是当前最流行的 Java Web 开发框架之一。结合使用这两者,我们可以轻松的完成高效、灵活的数据存储操作。 在本文中,我们将通过两个实例来演示如何在 SpringBoot 中使用 MongoDB 实现增删改查操作。 示例 1…

    MongoDB 2023年5月16日
    00
  • 28个MongoDB经典面试题详解

    28个MongoDB经典面试题详解攻略 问题1:什么是MongoDB? MongoDB是一个基于分布式文件存储的开源数据库系统,以易于使用、高性能和可扩展性被广泛使用。 问题2:为什么使用MongoDB? MongoDB具有以下优点: 高可扩展性 更好的性能 无需定义架构 极其强大的查询语句 支持灵活的文档结构 问题3:什么是MongoDB集合? Mongo…

    MongoDB 2023年5月16日
    00
  • MongoDB常用概念介绍

    MongoDB是一种开源文档型NoSQL数据库,使用JSON格式保存数据。在使用MongoDB时有一些常用概念,本文将对这些概念进行详细的解释和说明。 MongoDB 集合(Collection) 集合是MongoDB中用来存储数据的地方,类似于关系型数据库中的表。集合中存储的是文档(Document),每个文档是一个键值对(Key-Value)的构成,键是…

    MongoDB 2023年3月13日
    00
  • MongoDB数据库插入、更新和删除操作详解

    MongoDB数据库插入、更新和删除操作详解 插入数据 MongoDB中插入数据使用insert()函数,语法如下: db.collection.insert(document) 其中,db.collection表示要插入数据的集合名称,document参数表示要插入的文档。 例如,在名为students的集合中插入一个学生文档,可以使用以下命令: db.s…

    MongoDB 2023年5月16日
    00
  • SpringBoot实现的Mongodb管理工具使用解析

    针对你提出的问题,“SpringBoot实现的Mongodb管理工具使用解析”的完整攻略,我将从以下几个方面进行详细讲解: SpringBoot实现的Mongodb管理工具是什么 如何使用SpringBoot实现的Mongodb管理工具 示例演示:如何创建一个MongoDB数据库和集合 示例演示:如何往MongoDB集合中插入数据 接下来我将依次进行详细说明…

    MongoDB 2023年5月16日
    00
  • node.js入门实例helloworld详解

    下面是“node.js入门实例helloworld详解”的完整攻略。 概述 本文将详细介绍如何使用node.js编写一个简单的helloworld程序。node.js是一个基于Chrome V8引擎的JavaScript运行环境,旨在提供一种轻量级、高效率的网络应用程序开发方式。node.js使用了事件驱动、异步I/O等机制来实现高并发、高性能的特性。 环境…

    MongoDB 2023年5月16日
    00
  • mongoDB分页的两种方法(图例)

    MongoDB分页的两种方法(图例) 在MongoDB中实现分页的方式有很多,但是比较常用和简单的方式是采用limit和skip的方式。这两种方式的具体使用方式将在下文中详细说明。 方法一:使用skip和limit实现分页 使用skip和limit方式可以很容易的实现分页功能。其中skip用于指定从第几条记录开始查找,limit用于指定需要查询的记录数量。 …

    MongoDB 2023年5月16日
    00
合作推广
合作推广
分享本页
返回顶部