移动端效果之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 相关文章推荐
php gethostbyname获取域名ip地址函数详解
Jan 24 Javascript
js继承的实现代码
Aug 05 Javascript
JS运行耗时操作的延时显示方法
Nov 19 Javascript
js使用removeChild方法动态删除div元素
Aug 01 Javascript
js中confirm实现执行操作前弹出确认框的方法
Nov 01 Javascript
深入分析javascript中的错误处理机制
Jul 17 Javascript
JavaScript代码里的判断小结
Aug 22 Javascript
Bootstrap分页插件之Bootstrap Paginator实例详解
Oct 15 Javascript
ES6中参数的默认值语法介绍
May 03 Javascript
微信、QQ、微博、Safari中使用js唤起App
Jan 24 Javascript
JS操作字符串转数字的常见方法示例
Oct 29 Javascript
JavaScript进阶(一)变量声明提升实例分析
May 09 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
Win2003服务器安全加固设置--进一步提高服务器安全性
2007/05/23 PHP
WordPress中用于获取文章信息以及分类链接的函数用法
2015/12/18 PHP
Yii使用Captcha验证码的方法
2015/12/28 PHP
CodeIgniter配置之SESSION用法实例分析
2016/01/19 PHP
深入浅析PHP的session反序列化漏洞问题
2017/06/15 PHP
PHP实现打包下载文件的方法示例
2017/10/07 PHP
golang实现php里的serialize()和unserialize()序列和反序列方法详解
2018/10/30 PHP
PHP中抽象类,接口功能、定义方法示例
2019/02/26 PHP
jQuery html()等方法介绍
2009/11/18 Javascript
给应用部分的js代码设定一个统一的入口
2014/06/15 Javascript
JS+CSS实现实用的单击输入框弹出选择框的方法
2015/02/28 Javascript
Jquery针对tr td的一些实用操作方法(必看篇)
2016/10/05 Javascript
bootstrap table方法之expandRow-collapseRow展开或关闭当前行数据
2020/08/09 Javascript
React中的refs的使用教程
2018/02/13 Javascript
bootstrap treeview 树形菜单带复选框及级联选择功能
2018/06/08 Javascript
[00:56]PWL开团时刻DAY8——追追追追追!
2020/11/09 DOTA
python实现TCP服务器端与客户端的方法详解
2015/04/30 Python
对python PLT中的image和skimage处理图片方法详解
2019/01/10 Python
PyCharm 设置SciView工具窗口的方法
2019/01/15 Python
python 对类的成员函数开启线程的方法
2019/01/22 Python
python实现矩阵打印
2019/03/02 Python
Python K最近邻从原理到实现的方法
2019/08/15 Python
如何在Django中使用聚合的实现示例
2020/03/23 Python
让IE支持CSS3的不完全兼容方案
2014/09/19 HTML / CSS
施华洛世奇天猫官方旗舰店:SWAROVSKI
2017/04/17 全球购物
Fanatics法国官网:美国体育电商
2019/08/27 全球购物
美国围栏公司:Walpole Outdoors
2019/11/19 全球购物
CHRONEXT英国:您的首选奢华腕表目的地
2020/03/30 全球购物
校园运动会广播稿
2014/10/06 职场文书
学校党的群众路线教育实践活动总结材料
2014/10/30 职场文书
2014企业年终工作总结
2014/12/23 职场文书
2015年度员工自我评价范文
2015/03/11 职场文书
公司员工手册范本
2015/05/14 职场文书
2016寒假假期总结
2015/10/10 职场文书
Python面向对象之内置函数相关知识总结
2021/06/24 Python
Java 死锁解决方案
2022/05/11 Java/Android