이전 모바일 효과에 대한 설명에 이어, 우연히 프로젝트에서 이 효과를 사용해야 하게 되어 Ele.me의 컴포넌트 라이브러리에 가서 살펴보았는데요. 효과는 WeChat의 모바일 효과 CellSwiper 구현
와 약간의 차이가 있습니다. 프로젝트에서 React
를 사용하기 때문에 React
의 모든 구성 요소는 이전에 사용했던 것은 문자별로 코드화되어 있기 때문에 (생각하기도 힘들지만) 이전의 swiper
와 결합하면 원리도 유사하고 WeChat과 유사한 끌어당김 효과를 얻을 수 있습니다. 모바일 효과 CellSwiper 구현
还是有点差别的,由于项目中又是使用的React
,之前使用的React
所有组件都是自己一个字母一个字母码起来的(想来也是辛酸),所以结合之前的swiper
,道理类似,实现了类似微信端的抽拉效果。
<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
其实是有一个层级的,因此就会覆盖下面的层,导致显示不出来)
既然都采用绝对定位,那么上面的层级的高度就需要计算
定位好层级之后,下面的按钮层就可以基本不用管了,主要的操作还是滑动。滑动可以借鉴之前的swiper代码,这里不作赘述。
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';}
// 滑动中 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;}// ...
整个流程来说相当于swiper
还是相当简单的,可以说其实就是一个swiper
your-code
인 부분이 추가하려는 코드입니다. 🎜🎜효과를 내기 전에 먼저 어떻게 해야 하는지 분석해야 타겟이 될 수 있습니다. 예를 들어 이 효과는 커버링 유형의 풀아웃을 사용하므로 두 개의 레이어가 필요합니다. 상위 레이어는 슬라이딩을 담당하고 하위 레이어는 고정되어 있어 하위 레이어가 자연스럽게 표시됩니다. 🎜🎜그래서 두 가지 점이 있습니다. 🎜z-index:-1
가 설정되어 있어서 하위 레이어가 표시되지 않는 것을 발견했습니다. 하지만 일반 페이지의 경우에는요. , body.
사실 레벨이 있어서 하위 레이어를 덮어서 표시되지 않게 됩니다)🎜스와이프아직도 꽤 간단합니다. 실제로 <code>swiper
를 단순화한 버전이라고 할 수 있습니다. 🎜🎜효과를 얻은 후 어떻게 분석하느냐가 핵심입니다. 명확한 분석 아이디어가 있어야만 이 분석에 대한 합리적인 솔루션이 제공될 수 있습니다. 여기서는 이 효과를 만드는 과정을 기록하고 모든 사람에게 도움이 되기를 바랍니다. 🎜위 내용은 모바일 효과 CellSwiper 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!