移动端效果之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 相关文章推荐
用正则表达式 动态创建/增加css style script 兼容IE firefox
Mar 10 Javascript
浏览器脚本兼容 文本框中,回车键触发事件的兼容
Jun 21 Javascript
jquery实现在页面加载的时自动为日期插件添加当前日期
Aug 20 Javascript
js中取得变量绝对值的方法
Jan 03 Javascript
js仿黑客帝国字母掉落效果代码分享
Nov 08 Javascript
ionic实现下拉刷新载入数据功能
May 11 Javascript
JQuery EasyUI 结合ztrIee的后台页面开发实例
Sep 01 jQuery
AngularJS实现的根据数量与单价计算总价功能示例
Dec 26 Javascript
vuex与组件联合使用的方法
May 10 Javascript
JavaScript 中的无穷数(Infinity)详解
Feb 13 Javascript
js实现树形数据转成扁平数据的方法示例
Feb 27 Javascript
vue实现打地鼠小游戏
Aug 21 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用户指南-cookies部分
2006/10/09 PHP
PHP初学入门
2006/11/19 PHP
php 获取远程网页内容的函数
2009/09/08 PHP
关于PHP的curl开启问题探讨
2014/04/08 PHP
php使用fopen创建utf8编码文件的方法
2014/10/31 PHP
php+mysql数据库实现无限分类的方法
2014/12/12 PHP
基于PHP实现简单的随机抽奖小程序
2016/01/05 PHP
PHP pthreads v3下worker和pool的使用方法示例
2020/02/21 PHP
JavaScript获取GridView中用户点击控件的行号,列号
2009/04/14 Javascript
javascript中length属性的探索
2011/07/31 Javascript
DWZ table的原生分页浅谈
2013/03/01 Javascript
Javascript 遍历页面text控件详解
2014/01/06 Javascript
分享33个jQuery与CSS3实现的绚丽鼠标悬停效果
2014/12/15 Javascript
JavaScript中的全局对象介绍
2015/01/01 Javascript
IE下JS保存图片的简单实例
2016/07/15 Javascript
实现easyui的datagrid导出为excel的示例代码
2016/11/10 Javascript
vue2.x 父组件监听子组件事件并传回信息的方法
2017/07/17 Javascript
关于Vue背景图打包之后访问路径错误问题的解决
2017/11/03 Javascript
javascript高仿热血传奇游戏实现代码
2018/02/22 Javascript
layui.tree组件的使用以及搜索节点功能的实现
2019/09/26 Javascript
uniapp,微信小程序中使用 MQTT的问题
2020/07/11 Javascript
详解vite2.0配置学习(typescript版本)
2021/02/25 Javascript
vue常用高阶函数及综合实例
2021/02/25 Vue.js
简单谈谈Python中的反转字符串问题
2016/10/24 Python
Django model update的多种用法介绍
2020/03/28 Python
django一对多模型以及如何在前端实现详解
2019/07/24 Python
python随机生成大小写字母数字混合密码(仅20行代码)
2020/02/01 Python
浅谈pytorch 模型 .pt, .pth, .pkl的区别及模型保存方式
2020/05/25 Python
python支持多继承吗
2020/06/19 Python
如何唤起类中的一个方法
2013/11/29 面试题
好人好事事迹材料
2014/02/12 职场文书
公司开业庆典主持词
2014/03/21 职场文书
大学生党员承诺书
2014/05/20 职场文书
学术诚信承诺书
2014/05/26 职场文书
领导干部遵守党的政治纪律情况思想汇报
2014/09/14 职场文书
如何使用flask将模型部署为服务
2021/05/13 Python