Ausführliche Erklärung von IndexList auf mobilen Endgeräten

Dieser Artikel stellt hauptsächlich die Indexliste der mobilen Terminaleffekte vor. Ich hoffe, dass er für alle hilfreich ist.

steht vorne

Im Anschluss an den vorherigen Vortrag über mobile Effekte werde ich dieses Mal das Implementierungsprinzip von IndexList erläutern. Der Effekt ist wie folgt:

Bitte sehen Sie sich den Code hier an: github

Swiper für mobilen Effekt

Picker für mobilen Effekt

cellSwiper für mobile Effekte

1. Kernanalyse

Das Gesamtprinzip besteht darin, dass, wenn Sie auf die Indexleiste rechts klicken oder schieben, get Klicken Sie auf den Indexwert, um den Inhalt links an die entsprechende Position zu verschieben. Wie Sie zu einer bestimmten Position gleiten, sehen Sie in der folgenden Aufschlüsselung:

1.1 Grundlegender HTML-Code

<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-Initialisierung

Da die indexList in der Ele.me-Komponentenbibliothek die Vue-Komponente zum Generieren von DOM verwendet, verwende ich hier grob Javascript, um die DOM-Generierung zu simulieren.

// 内容填充
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 Schiebeereignisse binden

Fügen Sie der Indexleiste rechts ein Schiebeereignis hinzu, das beim Klicken oder Schieben ausgelöst wird. Im Quellcode sind am Ende des Touchstart-Ereignisses die Touchmove- und Touchend-Ereignisse an das Fenster gebunden, um den Schiebebereich zu vergrößern. Nur wenn das Touchstart-Ereignis am Anfang der Indexleiste ausgelöst wird, dann am window Löst Gleit- und Endereignisse aus, was bedeutet, dass wir während des Gleitvorgangs im Inhaltsbereich auf der linken Seite gleiten und gleichzeitig den Indexeffekt erzielen können.

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 wird hier verwendet. Sie können diese API auf MDN überprüfen.

Wenn Multi-Touch nicht verwendet wird, ist der Unterschied zwischen „changedTouches“ und „touches“ nicht besonders groß. Wenn „changedTouches“ zweimal auf denselben Punkt geklickt wird, gibt es beim zweiten Mal keinen Touch-Wert. Weitere Informationen finden Sie in diesem Artikel

Schauen wir uns an, wie man gleitet:

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();
 }
}

Für die API von elementFromPoint können Sie lesen hier

caniuse Kompatibilität von getBoundingClientRect und scrollIntoView auf .com

getBoundingClientRect

scrollIntoView

Endlich erforderlich Abmelden des Schiebeereignisses im Fenster

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

2. Zusammenfassung
Es gibt so viele Analysen, Sie Sie können hervorragendes Design lernen, indem Sie sich den Quellcode ansehen, um weitere Ideen zu erhalten. Wenn ich beispielsweise zu Beginn dazu aufgefordert würde, könnte ich Ereignisse nur an die Indexleiste auf der rechten Seite binden und den Inhalt auf der linken Seite nicht verknüpfen, sodass der Gleitbereich stark reduziert wird.

Sie können relativ weit entferntes Wissen erlernen, indem Sie sich den Quellcode ansehen und sich selbst zum Lernen ermutigen. Zum Beispiel die Untersuchung von APIs wie changesTouches und elementFromPoint im Artikel.

Verwandte Empfehlungen:

Einführung in den IndexList-Effekt auf dem mobilen Endgerät

js realisiert den Fingergleitkarusselleffekt auf das mobile Endgerät

So bestimmen Sie horizontale und vertikale Bildschirme in mobilem HTML5

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung von IndexList auf mobilen Endgeräten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!