모바일 단말기에서 IndexList의 효과 소개

앞면에 작성

앞서 모바일 효과에 대한 논의에 이어 이번에는 모바일 단말기에서 모바일 단말기에서 IndexList의 효과 소개의 효과 소개의 구현 원리를 설명하겠습니다. 효과는 다음과 같습니다. 모바일 단말기에서 모바일 단말기에서 IndexList의 효과 소개의 효과 소개的实现原理。效果如下：

代码请看这里：github

移动端效果之swiper

移动端效果之picker

移动端效果之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初始化

由于饿了么组件库中的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 += &#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.모바일 단말기에서 모바일 단말기에서 IndexList의 효과 소개의 효과 소개().top;}// 右边索引栏的宽度navWidth = nav.clientWidth;// 左边内容的初始化高度和右边距// 高度为当前页面的高度与内容top的差值content.style.marginRight = navWidth + &#39;px&#39;;content.style.height = currentHeight + &#39;px&#39;;

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.모바일 단말기에서 모바일 단말기에서 IndexList의 효과 소개의 효과 소개().top - firstSection.모바일 단말기에서 모바일 단말기에서 IndexList의 효과 소개의 효과 소개().top;
      
        // 或者使用모바일 단말기에서 모바일 단말기에서 IndexList의 효과 소개의 효과 소개来达到相同的目的
        // 不过存在兼容性的问题
        // targetDOM.모바일 단말기에서 모바일 단말기에서 IndexList의 효과 소개의 효과 소개();
    }}

关于elementFromPoint的API可以看这里

caniuse.com上关于모바일 단말기에서 모바일 단말기에서 IndexList의 효과 소개의 효과 소개和모바일 단말기에서 모바일 단말기에서 IndexList의 효과 소개의 효과 소개的兼容性

• 모바일 단말기에서 모바일 단말기에서 IndexList의 효과 소개의 효과 소개

• 모바일 단말기에서 모바일 단말기에서 IndexList의 효과 소개의 효과 소개

最后需要注销window上的滑动事件

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

2. 总结

分析就这么多，多看源码能够学到优秀的设计理念。比如如果最开始让我来做的话，我可以就只会在右侧的索引栏上绑定事件，而不会关联左侧的内容，这样滑动的区域将会大大减小。

同时看源码可以学到一些比较偏僻的知识，促使自己去学习。比如文中的changedTouches以及elementFromPoint等API

🎜🎜참조하세요 코드는 여기에 있습니다: github🎜🎜모바일 효과용 Swiper🎜🎜모바일 효과용 선택기🎜🎜모바일 효과용 cellSwiper🎜🎜1. 핵심 분석🎜🎜전체적인 원리는 오른쪽에 있는 인덱스 막대를 클릭하거나 슬라이드할 때 클릭한 Index 값에 따라 왼쪽 콘텐츠가 해당 위치로 슬라이드됩니다. 특정 위치로 슬라이드하는 방법은 아래 분석을 참조하세요. 🎜

1.1 기본 HTML 코드

🎜rrreee

1.2 DOM 초기화

🎜 Ele.me 구성 요소 라이브러리의 indexList는 DOM을 생성하기 위해 vue 구성 요소를 사용하기 때문에 대략 javascript를 사용합니다. 여기서 DOM을 생성하세요. 🎜

🎜rrreee

1.3 슬라이딩 이벤트 바인딩

🎜오른쪽 인덱스 바에 클릭하거나 슬라이딩할 때 트리거되는 슬라이딩 이벤트를 추가하세요. 소스 코드에서 touchstart 이벤트 끝에서 touchmove 및 touchend 이벤트가 window에 바인딩됩니다. 슬라이딩 영역을 더 크게 만들기 위해 처음에 인덱스 바에서 touchstart 이벤트가 트리거될 때만 window에서 슬라이딩 및 종료 이벤트가 트리거됩니다. 이는 슬라이딩 프로세스 중에 왼쪽의 콘텐츠 영역에서 슬라이드할 수 있으며 동시에 색인 효과를 얻을 수 있음을 의미합니다. 🎜

🎜rrreee🎜e.changedTouches는 여기서 사용됩니다. 이 API는 MDN으로 이동할 수 있습니다. 확인해 보세요. 🎜🎜멀티 터치를 사용하지 않는 경우 changedTouches와 changedTouches의 차이는 특별히 크지 않습니다. 두 번째에는 touch 값이 없습니다. 자세한 내용은 이 기사를 읽어보세요. 🎜🎜 슬라이드하는 방법을 살펴보겠습니다. 🎜

🎜rrreee🎜API에 대해 읽을 수 있습니다. code>elementFromPoint 여기 🎜🎜caniuse.com에서 모바일 단말기에서 모바일 단말기에서 IndexList의 효과 소개의 효과 소개 및 모바일 단말기에서 모바일 단말기에서 IndexList의 효과 소개의 효과 소개🎜

• 의 호환성에 대해 알아보세요. 🎜모바일 단말기에서 모바일 단말기에서 IndexList의 효과 소개의 효과 소개🎜

🎜 🎜

• 🎜모바일 단말기에서 모바일 단말기에서 IndexList의 효과 소개의 효과 소개🎜

🎜🎜🎜마지막으로 window🎜에서 슬라이딩 이벤트를 로그아웃해야 합니다

🎜rrreee🎜2. 요약🎜🎜분석 정말 많고, 소스코드를 보면 훌륭한 디자인 컨셉을 배울 수 있습니다. 예를 들어, 처음에 하라고 하면 이벤트를 오른쪽 인덱스 바에만 바인딩하고 왼쪽 콘텐츠는 연결하지 않아서 슬라이딩 영역이 크게 줄어들게 됩니다. 🎜🎜동시에 소스 코드를 보면서 상대적으로 먼 지식을 배우고 스스로 학습하도록 격려할 수 있습니다. 예를 들어 기사의 changedTouches, elementFromPoint 및 기타 API에 대한 연구입니다. 🎜

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