Einführung in die Wirkung von IndexList auf mobilen Endgeräten

wird vor

geschrieben. Im Anschluss an die vorherige Diskussion der mobilen Effekte werde ich dieses Mal das Implementierungsprinzip von Einführung in die Wirkung von IndexList auf mobilen Endgeräten 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 beim Klicken oder Verschieben der Indexleiste auf der rechten Seite der Inhalt auf der linken Seite erstellt wird den Indexwert des Klicks. Schieben Sie ihn an die entsprechende Position. 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

Aufgrund der indexList in der Ele.me-Komponentenbibliothek wird die vue-Komponente zum Generieren von DOM verwendet. Hier verwende ich grob javascript, um die Generierung von DOM 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.Einführung in die Wirkung von IndexList auf mobilen Endgeräten().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 Ereignisses touchstart die Ereignisse window und touchmove an touchend gebunden, um den Schiebebereich zu vergrößern. Sie werden nur am Anfang auf der Indexleiste ausgelöst . touchstart-Ereignis und dann die Gleit- und Endereignisse auf window auslösen, was bedeutet, dass wir während des Gleitvorgangs im Inhaltsbereich auf der linken Seite gleiten und gleichzeitig den Effekt von index 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 API dafür MDN verwenden.

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 kein 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.Einführung in die Wirkung von IndexList auf mobilen Endgeräten().top - firstSection.Einführung in die Wirkung von IndexList auf mobilen Endgeräten().top;
      
        // 或者使用Einführung in die Wirkung von IndexList auf mobilen Endgeräten来达到相同的目的
        // 不过存在兼容性的问题
        // targetDOM.Einführung in die Wirkung von IndexList auf mobilen Endgeräten();
    }}

Für elementFromPoint über API, Sie können hier lesen

Kompatibilität von

und Einführung in die Wirkung von IndexList auf mobilen Endgeräten auf Einführung in die Wirkung von IndexList auf mobilen Endgerätencaniuse.com

• Einführung in die Wirkung von IndexList auf mobilen Endgeräten

• Einführung in die Wirkung von IndexList auf mobilen Endgeräten

Zuletzt müssen Sie sich am window

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

2. Zusammenfassung

Das ist alles zur Analyse. Sie können hervorragende Designkonzepte lernen, indem Sie mehr Quellcode lesen. 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 das Studium von

und changedTouches und anderen elementFromPoint im Text. API

Das obige ist der detaillierte Inhalt vonEinführung in die Wirkung von IndexList auf mobilen Endgeräten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!