모바일 효과 CellSwiper 구현

앞면에 작성

이전 모바일 효과에 대한 설명에 이어, 우연히 프로젝트에서 이 효과를 사용해야 하게 되어 Ele.me의 컴포넌트 라이브러리에 가서 살펴보았는데요. 효과는 WeChat의 모바일 효과 CellSwiper 구현와 약간의 차이가 있습니다. 프로젝트에서 React를 사용하기 때문에 React의 모든 구성 요소는 이전에 사용했던 것은 문자별로 코드화되어 있기 때문에 (생각하기도 힘들지만) 이전의 swiper와 결합하면 원리도 유사하고 WeChat과 유사한 끌어당김 효과를 얻을 수 있습니다. 모바일 효과 CellSwiper 구현还是有点差别的，由于项目中又是使用的React，之前使用的React所有组件都是自己一个字母一个字母码起来的（想来也是辛酸），所以结合之前的swiper，道理类似，实现了类似微信端的抽拉效果。

1. 核心解析

1.1 HTML结构

<p class="c-cell-swiper" id="wrapper">
    <p class="cell-content" id="content">
        <p class="your-code">
            <img  class="icon" src="./images/t.jpg" alt="모바일 효과 CellSwiper 구현" ></img>
            <p class="left">
                <span>萌萌的卡洛奇</span>
                <p class="sub">我这个月要来看你啦</p>
            </p>
            <p class="right">now</p>
      </p>
    </p>
    <p class="cell-btn-group" id="btnGroup">
        <p class="cell-btn">标为未读</p>
        <p class="cell-btn">删除</p>
    </p></p>

代码中类名为your-code的地方是你自己要加的代码。

做一个效果之前，我们先需要分析一下我们应该怎么做，这样才能有的放矢。比如这个效果，由于采用的是覆盖式抽拉，因此，需要两个层，上面一个层负责滑动，下面一个层固定，当上面的层滑动完成之后，下面的自然就显示出来了。

因此有两个点：

• 上层和下层的层都要绝对定位，这样才好区别层级（最开始我试的是上面的层不需要决定定位，发现移到项目中的时候，下面的层显示不出来，因为最开始设置了z-index:-1。但一般的页面来说，body其实是有一个层级的，因此就会覆盖下面的层，导致显示不出来）

• 既然都采用绝对定位，那么上面的层级的高度就需要计算

1.2 代码分析

定位好层级之后，下面的按钮层就可以基本不用管了，主要的操作还是滑动。滑动可以借鉴之前的swiper代码，这里不作赘述。

1.2.1 计算高度和按钮组的宽度

var el = document.querySelector('#content');var btn = document.querySelector('#btnGroup');var wrapper = document.querySelector('#wrapper');function getBtnGroupWidth() {
    // 按钮组的宽度，滑动的最大距离
    btnGroupWidth = btn.getBoundingClientRect().width;
    wrapperHeight = el.getBoundingClientRect().height;
    // 设置最上层容器的高度
    wrapper.style.height = wrapperHeight + 'px';
    // 设置子容器高度
    el.children[0].style.height = wrapperHeight + 'px';
    // 设置按钮组的line-height,保证按钮组文字居中
    btn.style.lineHeight = wrapperHeight + 'px';}

1.2.2 滑动

// 滑动中 ontouchmove// ...// 这里计算的是上层滑动的距离范围// 滑动最远不能超过按钮组宽度// 滑动最小距离就是不滑动，也就是0offsetLeft = Math.min(Math.max(-btnGroupWidth, offsetLeft), 0);translate(el, offsetLeft);// ...// 滑动结束 ontouchend// ...// 如果是tap, 直接关闭if (dragDuration < 300) {
    var fireTap = Math.abs(offsetLeft) < 5 && Math.abs(offsetTop < 5);
    if (isNaN(offsetLeft) || isNaN(offsetTop)) {
        fireTap = true;
    }
    if (fireTap) {
        translate(el, 0, 150);
        opened = false;
        swiping = false;
        return;
    }}var distanceX = Math.abs(offsetLeft);// 如果向左滑动超过了按钮组的40%，辣么在松手的一刻自动滑开// 反之如果向右滑动超过了按钮组的40%就关闭if (distanceX > btnGroupWidth * 0.4 && offsetLeft < 0) {
    translate(el, -btnGroupWidth, 150);
    opened = true;} else {
    translate(el, 0, 150);
    opened = false;}// ...

2. 总结

整个流程来说相当于swiper还是相当简单的，可以说其实就是一个swiper

🎜🎜1. 핵심 분석🎜

1.1 HTML 구조

rrreee🎜코드에서 클래스 이름이 your-code인 부분이 추가하려는 코드입니다. 🎜🎜효과를 내기 전에 먼저 어떻게 해야 하는지 분석해야 타겟이 될 수 있습니다. 예를 들어 이 효과는 커버링 유형의 풀아웃을 사용하므로 두 개의 레이어가 필요합니다. 상위 레이어는 슬라이딩을 담당하고 하위 레이어는 고정되어 있어 하위 레이어가 자연스럽게 표시됩니다. 🎜🎜그래서 두 가지 점이 있습니다. 🎜

• 🎜상위 레이어와 하위 레이어는 절대 위치에 있어야 레벨을 구분할 수 있습니다(처음에는 상위 레이어를 시도했습니다). 위치를 정할 필요는 없고, 프로젝트로 옮겼을 때 맨 처음에 z-index:-1가 설정되어 있어서 하위 레이어가 표시되지 않는 것을 발견했습니다. 하지만 일반 페이지의 경우에는요. , body.사실 레벨이 있어서 하위 레이어를 덮어서 표시되지 않게 됩니다)🎜
• 🎜절대 위치 지정을 사용하기 때문에 높이가 상위 레벨을 계산해야 합니다🎜

1.2 코드 분석

🎜레이어 위치를 지정한 후에도 기본 작업은 여전히 ​​슬라이딩 상태로 아래의 버튼 레이어를 무시할 수 있습니다. 스와이프는 이전 스와이프 코드를 참조할 수 있으므로 여기서는 자세히 설명하지 않겠습니다. 🎜

1.2.1 버튼 그룹의 높이와 너비 계산

rrreee

1.2.2 스와이프

rrreee🎜2. 요약🎜🎜전체 프로세스는 스와이프아직도 꽤 간단합니다. 실제로 <code>swiper를 단순화한 버전이라고 할 수 있습니다. 🎜🎜효과를 얻은 후 어떻게 분석하느냐가 핵심입니다. 명확한 분석 아이디어가 있어야만 이 분석에 대한 합리적인 솔루션이 제공될 수 있습니다. 여기서는 이 효과를 만드는 과정을 기록하고 모든 사람에게 도움이 되기를 바랍니다. 🎜

위 내용은 모바일 효과 CellSwiper 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!