行動端效果CellSwiper的實現

寫在前面

接著之前的行動端效果講解，剛好專案中需要使用到這一效果，去餓了麼的元件庫看了一下效果，發現效果和微信端的 行動端效果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。 #其實是有一個層級的，因此就會覆蓋下面的層，導致顯示不出來）

既然都採用絕對定位，那麼上面的層級的高度就需要計算
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的簡化版本。 重點在於拿到一個效果之後如何分析，只有有清晰的分析思路才能針對這個分析來給出合理的解決方案。這裡只記錄自己做這個效果的歷程，拿出來分享，希望對大家有幫助。

以上是行動端效果CellSwiper的實現的詳細內容。更多資訊請關注PHP中文網其他相關文章！