移动端效果之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 相关文章推荐
js data日期初始化的5种方法
Dec 29 Javascript
JSONP获取Twitter和Facebook文章数的具体步骤
Feb 24 Javascript
js改变鼠标的形状和样式的方法
Mar 31 Javascript
jQuery实现时尚漂亮的弹出式对话框实例
Aug 07 Javascript
JavaScript中eval()函数用法详解
Dec 14 Javascript
BootStrap中Datetimepicker和uploadify插件应用实例小结
May 26 Javascript
详谈js中window.location.search的用法和作用
Feb 13 Javascript
jQuery中clone()函数实现表单中增加和减少输入项
May 13 jQuery
jquery tmpl模板(实例讲解)
Sep 02 jQuery
ES10的13个新特性示例(小结)
Sep 23 Javascript
JavaScript实现文件下载并重命名代码实例
Dec 12 Javascript
uni-app 支持多端第三方地图定位的方法
Jan 03 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中怎么搜索相关联数组键值及获取之
2013/10/17 PHP
理解JavaScript的prototype属性
2012/02/11 Javascript
jQuery ajax serialize()方法的使用以及常见问题解决
2013/01/27 Javascript
jQuery获取选中内容及设置元素属性的方法
2014/07/09 Javascript
js实现Select下拉框具有输入功能的方法
2015/02/06 Javascript
jQuery Uploadify 上传插件出现Http Error 302 错误的解决办法
2015/12/12 Javascript
AngularJS 入门教程之事件处理器详解
2016/08/19 Javascript
微信小程序开发一键登录 获取session_key和openid实例
2016/11/23 Javascript
JS实现旋转木马式图片轮播效果
2017/01/18 Javascript
jQuery代码实现实时获取时间
2017/01/29 Javascript
layui导航栏实现代码
2017/05/19 Javascript
iframe高度自适应及隐藏滚动条的实例详解
2017/09/29 Javascript
一个Vue视频媒体多段裁剪组件的实现示例
2018/08/09 Javascript
基于Vue 2.0 监听文本框内容变化及ref的使用说明介绍
2018/08/24 Javascript
说说如何利用 Node.js 代理解决跨域问题
2019/04/22 Javascript
微信小程序通过一个json实现分享朋友圈图片
2019/09/03 Javascript
使用kbone解决Vue项目同时支持小程序问题
2019/11/08 Javascript
js实现简单的随机点名器
2020/09/17 Javascript
Python translator使用实例
2008/09/06 Python
Python实现约瑟夫环问题的方法
2016/05/03 Python
python使用pyqt写带界面工具的示例代码
2017/10/23 Python
python实现K最近邻算法
2018/01/29 Python
python微信好友数据分析详解
2018/11/19 Python
PyQt 图解Qt Designer工具的使用方法
2019/08/06 Python
python实现人机五子棋
2020/03/25 Python
jupyter修改文件名方式(TensorFlow)
2020/04/21 Python
python多进程 主进程和子进程间共享和不共享全局变量实例
2020/04/25 Python
FOREO官方网站:LUNA露娜洁面仪
2016/11/28 全球购物
Clarks西班牙官方在线商店:clarks鞋
2019/05/03 全球购物
梅西百货官网:Macy’s
2020/08/04 全球购物
北大研究生linux应用求职信
2013/10/29 职场文书
公司董事长职责
2013/12/12 职场文书
经济管理专业毕业生自荐信范文
2014/01/02 职场文书
军训学生自我鉴定
2014/02/12 职场文书
岁月神偷观后感
2015/06/11 职场文书
MySQL8.0 Undo Tablespace管理详解
2022/06/16 MySQL