移动端效果之IndexList详解


Posted in Javascript onOctober 20, 2017

写在前面

接着前面的移动端效果讲,这次讲解的的是IndexList的实现原理。效果如下:

移动端效果之IndexList详解

代码请看这里:github

移动端效果之picker

移动端效果之cellSwiper

1. 核心解析

总体来说的原理就是当点击或者滑动右边的索引条时,通过获取点击的索引值来使左边的内容滑动到相应的位置。其中怎样滑动到具体的位置,看下面分解:

1.1 基本html代码

<div class="indexlist">
 <ul class="indexlist-content" id="content">
  <!-- 需要生成的内容 -->
 </ul>
 <div class="indexlist-nav" id="nav">
  <ul class="indexlist-navlist" id="navList">
   <-- 需要生成的索引条 -->
  </ul>
 </div>
 <div class="indexlist-indicator" style="display: none;" id="indicator"></div>
</div>

1.2 DOM初始化

由于饿了么组件库中的indexList是采用vue组件生成DOM,我这里大致使用javascript来模拟生成DOM。

// 内容填充
function initialDOM() {
 // D.data 获取内容数据
 var data = D.data;
 var contentHtml = '';
 var navHtml = '';
 // 初始化内容和NAV
 data.forEach(function(d) {
  var index = d.index;
  var items = d.items;
  navHtml += '<li class="indexlist-navitem">'+ index +'</li>';
  contentHtml += '<li class="indexsection" data-index="'+ index +'"><p class="indexsection-index">'+ index +'</p><ul>';
  items.forEach(function(item) {
   contentHtml += '<a class="cell"><div class="cell-wrapper"><div class="cell-title"><span class="cell-text">'+ item +'</span></div></div></a>';
  });
  contentHtml += '</ul></li>';
 });

 content.innerHTML = contentHtml;
 navList.innerHTML = navHtml;
}

// 样式初始化
if (!currentHeight) {
 currentHeight = document.documentElement.clientHeight -content.getBoundingClientRect().top;
}
// 右边索引栏的宽度
navWidth = nav.clientWidth;
// 左边内容的初始化高度和右边距
// 高度为当前页面的高度与内容top的差值
content.style.marginRight = navWidth + 'px';
content.style.height = currentHeight + 'px';

1.3 绑定滑动事件

在右边的索引栏上加上滑动事件,当点击或者滑动的时候触发。在源代码中在touchstart事件的结尾处,在window上绑定了touchmove与touchend事件,是为了使得滑动得区域更大,只有在开始的时候在索引栏上触发了touchstart事件时,之后再window上触发滑动和结束事件,这就意味着我们在滑动的过程中可以在左侧的内容区域滑动,同时也能达到index的效果。

function handleTouchstart(e) {
 // 如果不是从索引栏开始滑动,则直接return
 // 保证了左侧内容区域能够正常滑动
 if (e.target.tagName !== 'LI') {
  return;
 }
 
 // 记录开始的clientX值,这个clientX值将在之后的滑动中持续用到,用于定位
 navOffsetX = e.changedTouches[0].clientX;
 
 // 内容滑动到指定区域
 scrollList(e.changedTouches[0].clientY);
 if (indicatorTime) {
  clearTimeout(indicatorTime);
 }
 moving = true;
 
 // 在window区域注册滑动和结束事件
 window.addEventListener('touchmove', handleTouchMove, { passive: false });
 window.addEventListener('touchend', handleTouchEnd);
}

这里面用到了e.changedTouches,这个API可以去MDN查一下。

如果不是用到多点触控,changedTouches和touches的区别并不是特别大,changedTouches在同一点点击两次,第二次将不会有touch值。具体可以看这篇文章

下面看一下如何滑动:

function scrollList(y) {
 // 通过当前的y值以及之前记录的clientX值来获得索引栏中的对应item
 var currentItem = document.elementFromPoint(navOffsetX, y);
 if (!currentItem || !currentItem.classList.contains('indexlist-navitem')) {
  return;
 }
 
 // 显示指示器
 currentIndicator = currentItem.innerText;
 indicator.innerText = currentIndicator;
 indicator.style.display = '';

 // 找到左侧内容的对应section
 var targets = [].slice.call(sections).filter(function(section) { 
  var index = section.getAttribute('data-index');
  return index === currentItem.innerText;
 });
 var targetDOM;
 if (targets.length > 0) {
  targetDOM = targets[0];
  // 通过对比要滑动到的区域的top值与最开始的一个区域的top值
  // 两者的差值即为要滚动的距离
  content.scrollTop = targetDOM.getBoundingClientRect().top - firstSection.getBoundingClientRect().top;
  
  // 或者使用scrollIntoView来达到相同的目的
  // 不过存在兼容性的问题
  // targetDOM.scrollIntoView();
 }
}

关于elementFromPoint的API可以看这里

caniuse.com上关于getBoundingClientRect和scrollIntoView的兼容性

getBoundingClientRect

移动端效果之IndexList详解

scrollIntoView

移动端效果之IndexList详解

最后需要注销window上的滑动事件

window.removeEventListener('touchmove', handleTouchMove);
window.removeEventListener('touchend', handleTouchEnd);

2. 总结
分析就这么多,多看源码能够学到优秀的设计理念。比如如果最开始让我来做的话,我可以就只会在右侧的索引栏上绑定事件,而不会关联左侧的内容,这样滑动的区域将会大大减小。

同时看源码可以学到一些比较偏僻的知识,促使自己去学习。比如文中的changedTouches以及elementFromPoint等API的学习。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
收藏一些不常用,但是有用的代码
Mar 12 Javascript
JS图片浏览组件PhotoLook的公开属性方法介绍和进阶实例代码
Nov 09 Javascript
JS实现时间格式化的方式汇总
Oct 16 Javascript
director.js实现前端路由使用实例
Feb 03 Javascript
JavaScript中连接操作Oracle数据库实例
Apr 02 Javascript
JavaScript判断IE版本型号
Jul 27 Javascript
深入浅析JavaScript中的作用域和上下文
Mar 26 Javascript
Bootstrap 最常用的JS插件系列总结(图片轮播、标签切换等)
Jul 14 Javascript
Jquery 整理元素选取、常用方法一览表
Nov 26 Javascript
JS实现匀加速与匀减速运动的方法示例
Sep 04 Javascript
vue跨域解决方法
Oct 15 Javascript
JS前端宏任务微任务及Event Loop使用详解
Jul 23 Javascript
详解webpack性能优化——DLL
Oct 20 #Javascript
vue利用better-scroll实现轮播图与页面滚动详解
Oct 20 #Javascript
浅谈如何使用 webpack 优化资源
Oct 20 #Javascript
利用jQuery实现简单的拖曳效果实例代码
Oct 20 #jQuery
Js利用prototype自定义数组方法示例
Oct 20 #Javascript
js 中rewrap-ajax.js插件实例代码
Oct 20 #Javascript
jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法
Oct 20 #jQuery
You might like
PHP 中的类
2006/10/09 PHP
PHP中Date获取时间不正确怎么办
2008/06/05 PHP
symfony表单与页面实现技巧
2015/01/26 PHP
详解php中空字符串和0之间的关系
2016/10/23 PHP
java解析json方法总结
2019/05/16 PHP
Laravel 之url参数,获取路由参数的例子
2019/10/21 PHP
Nigma vs AM BO3 第二场2.13
2021/03/10 DOTA
js 鼠标点击事件及其它捕获
2009/06/04 Javascript
jQuery hover 延时器实现代码
2011/03/12 Javascript
javascript封装 Cookie 应用接口
2015/08/07 Javascript
javascript如何操作HTML下拉列表标签
2015/08/20 Javascript
jquery+css实现的红色线条横向二级菜单效果
2015/08/22 Javascript
TypeOf这些知识点你了解吗
2016/02/21 Javascript
React实践之Tree组件的使用方法
2017/09/30 Javascript
微信小程序使用map组件实现路线规划功能示例
2019/01/22 Javascript
浅谈webpack 四个核心概念之Entry
2019/06/12 Javascript
Vue仿微信app页面跳转动画效果
2019/08/21 Javascript
Electron 调用命令行(cmd)
2019/09/23 Javascript
Vue实现Layui的集成方法步骤
2020/04/10 Javascript
Python合并两个字典的常用方法与效率比较
2015/06/17 Python
Python实现获取域名所用服务器的真实IP
2015/10/25 Python
Windows系统下多版本pip的共存问题详解
2017/10/10 Python
通过python实现弹窗广告拦截过程详解
2019/07/10 Python
python闭包与引用以及需要注意的陷阱
2020/09/18 Python
Django restful framework生成API文档过程详解
2020/11/12 Python
Python实例教程之检索输出月份日历表
2020/12/16 Python
Python字符串的15个基本操作(小结)
2021/02/03 Python
G-Form护具官方网站:美国运动保护装备
2019/09/04 全球购物
哈萨克斯坦最大的时装、鞋子和配饰在线商店:Lamoda.kz
2019/11/19 全球购物
限量版运动鞋和街头服饰:TheDrop
2020/09/06 全球购物
高二历史教学反思
2014/01/25 职场文书
优秀团员个人事迹材料
2014/01/29 职场文书
代理协议书
2014/04/22 职场文书
董事长秘书工作总结
2015/08/14 职场文书
小学教师教学随笔
2015/08/14 职场文书
小学教师暑期培训心得体会
2016/01/09 职场文书