모바일 단말기의 IndexList에 대한 자세한 설명

이 글은 주로 모바일 단말기 효과의 IndexList를 소개하고 있습니다. 관심있는 친구들이 참고하시면 도움이 될 것 같습니다.

앞에 작성

앞서 설명한 모바일 효과에 이어 이번에는 IndexList의 구현 원리를 설명하겠습니다. 효과는 다음과 같습니다.

여기 코드를 참조하세요: github

모바일 효과용 swiper

모바일 효과용 선택기

모바일 효과용 cellSwiper

1. 핵심 분석

전체 원리 오른쪽의 인덱스 바를 클릭하거나 슬라이드하면 클릭에 대한 인덱스 값을 얻어 왼쪽의 콘텐츠가 해당 위치로 슬라이드된다는 것입니다. 특정 위치로 슬라이드하는 방법은 아래 분석을 참조하세요.

1.1 기본 HTML 코드

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

1.2 DOM 초기화

Ele.me 컴포넌트 라이브러리의 indexList는 vue 컴포넌트를 사용하여 DOM을 생성하므로, 일반적으로 DOM 생성을 시뮬레이션하려면 여기에서 javascript를 사용하십시오.

// 内容填充
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 += &#39;<li class="indexlist-navitem">&#39;+ index +&#39;</li>&#39;;
  contentHtml += &#39;<li class="indexsection" data-index="&#39;+ index +&#39;"><p class="indexsection-index">&#39;+ index +&#39;</p><ul>&#39;;
  items.forEach(function(item) {
   contentHtml += &#39;<a class="cell"><p class="cell-wrapper"><p class="cell-title"><span class="cell-text">&#39;+ item +&#39;</span></p></p></a>&#39;;
  });
  contentHtml += &#39;</ul></li>&#39;;
 });

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

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

1.3 슬라이딩 이벤트 바인딩

오른쪽 인덱스 바에 슬라이딩 이벤트를 추가하세요. 클릭하거나 슬라이딩할 때 트리거됩니다. 소스 코드에서는 touchstart 이벤트가 끝나면 touchmove 및 touchend 이벤트가 창에 바인딩되어 슬라이딩 영역을 더 크게 만듭니다. window 슬라이딩 및 종료 이벤트를 트리거합니다. 즉, 슬라이딩 프로세스 중에 왼쪽 콘텐츠 영역에서 슬라이드할 수 있으며 동시에 인덱스 효과를 얻을 수 있습니다.

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에서 확인할 수 있습니다.

멀티 터치를 사용하지 않으면 변경된 터치와 터치의 차이가 특별히 크지 않습니다. 동일한 지점에서 변경된 터치를 두 번 클릭하면 두 번째 터치 값이 없습니다. 자세한 내용은 이 기사를 읽어보세요

슬라이드하는 방법은 다음과 같습니다.

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에 대해서는 getBoundingClientRect 및 scrollIntoView

getBoundingClientRect

의 호환성에 대해 여기

caniuse.com을 읽어보세요.

sc RollIntoView

마지막으로 창에서 슬라이딩 이벤트를 취소해야 합니다

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

2. 분석이 너무 많아서 보시고 훌륭한 디자인 개념을 배울 수 있습니다. 소스 코드. 예를 들어, 처음에 하라고 하면 이벤트를 오른쪽 인덱스 바에만 바인딩하고 왼쪽 콘텐츠는 연결하지 않아서 슬라이딩 영역이 크게 줄어들게 됩니다.
동시에 소스 코드를 보면서 상대적으로 먼 지식을 배우고 스스로 학습하도록 격려할 수 있습니다. 예를 들어 기사에서 ChangeTouches 및 elementFromPoint와 같은 API에 대한 연구를 살펴보겠습니다.

관련 권장 사항:

모바일 측의 IndexList 효과 소개

js를 사용하여 모바일 측에서 손가락 슬라이딩 캐러셀 효과를 실현

모바일 HTML5에서 가로 및 세로 화면을 판단하는 방법

위 내용은 모바일 단말기의 IndexList에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!