Question. 問題

實現一個購物車中，左滑商品出現刪除按鈕的效果。

Solution. 解決

HTML文件部分：

<ul class="cart-buy list" id="list">
    <li class="cart-tr it-selected" id="150" data-spec="" style="border-bottom: none;">
        <div class="checkbox mui-checkbox">
            <input type="checkbox" name="checkbox1"
 
 id="listCheckBox" value="1" checked="checked">
        </div>
        <div class="nr">
            <a href="http://www.58dmnk.com/H4WXw-g.html" class="picbox"><img src="upload/img/goods/20171216/96880305e72bbd2bb3325a90a538b603_s.jpg" width="60" height="60" alt="商品圖片未上傳"></a>
            <div
 
 class="word">
                <a href="http://www.58dmnk.com/H4WXw-g.html" class="title">德瑪乃康木蘭醇四合一祛痘套裝</a>
                <div class="price">
                    <p class="left red">￥<span class="g-price">199.00</span></p>
                    <p>x<span
 
 class="reconum">1</span></p>
                </div>
            </div>
            <input class="subtotal" type="hidden" value="199.00">
            <div class="mui-numbox num-add-reduce cart-btn-add-reduce-style" data-numbox-min="1" data-numbox-max="462">
                <button class="mui-btn mui-btn-numbox-minus" type="button" disabled="">-</button>
                <input id="test" class="mui-input-numbox result" type="number" value="1" maxlength="3">
                <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
            </div>
        </div>
        <button class="del" onclick="delCart('150','')">刪除</button>
    </li>
</ul>

該部分整體上是一個 ul-li 的列表，而 li 中分兩部分，左邊的內容部分和右邊的刪除按鈕。

CSS部分：

i{font-style:normal;}
.cart-buy li {
    margin-bottom: 0; padding:0 0 0 .25rem; border-bottom:1px solid #ddd;
    /* 定義1.2倍螢幕寬度的li，超出部分隱藏
        其中超出的0.2倍的螢幕寬度放置「刪除」按鈕
        這裡需要設定根元素html的font-size，計算規則如下：
            設定320px寬度的螢幕的font-size為40px，
            則320px寬度為8rem，1.2倍的螢幕寬度為1.2*8=9.6rem
     */
    display:block; width:9.6rem; overflow:hidden;
    transition:all 0.2s linear; -webkit-transition:all 0.2s linear;
}
.cart-buy li .mui-checkbox{margin-top:.65rem;}
.cart-buy li .mui-checkbox input[type=checkbox], .mui-radio input[type=radio]{width: 0;height: 0;border-color:#fff;}

.cart-buy li .nr {
    /* 動態計算該部分寬度 */
    width: -webkit-calc(100% - 2.5rem); width: -moz-calc(100% - 2.5rem); width: calc(100% - 2.5rem);
    display: inline-block; padding: .25rem 0; margin-left: .85rem;
}
.cart-buy li .nr .picbox{ border:none;}
.cart-buy li .nr .picbox img {
    width: 1.5rem; height: 1.5rem;
}
.cart-buy li .word {
    display: inline-block; margin-left: .25rem; vertical-align: top;
    width: -moz-calc(100% - 2rem); width: -webkit-calc(100% - 2rem); width: calc(100% - 2rem);
}
.cart-buy li .word .title {
    font-size: .3rem; line-height: .35rem;
    display: block; height: .72rem; overflow: hidden;
    margin-bottom: .3rem;
}
.cart-buy li .del{display: inline-block;width:1.5rem;text-align:center;background:#E2421B;color:#fff;padding: .25rem 0;height: 2rem;
    line-height: 1.5rem;
    vertical-align: bottom;}

/* 實現左滑效果 通過JS加到li標籤上 */
.swipeleft{transform:translateX(-1.5rem);-webkit-transform:translateX(-1.5rem);}

CSS 中需要處理適配不同螢幕的問題，所以在單位上使用 rem。

取螢幕寬度的 1.2 倍，將超出的 0.2 倍的螢幕寬度隱藏，作為刪除按鈕，只有在使用者左滑的時候，出現這0.2倍的螢幕寬度的按鈕。

JS主要有兩個比較重要的部分：第一個是螢幕適配，第二個是滑動事件。

螢幕適配：

(function (doc, win) {
    var docEl = doc.documentElement,
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
    recalc = function () {
        var clientWidth = docEl.clientWidth;
        if (!clientWidth) return; 
        if(clientWidth>=640){
            docEl.style.fontSize='80px';
        }else{
            docEl.style.fontSize = 40 * (clientWidth / 320) + 'px';
        }       
    };
    if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

取 320px 的螢幕寬度為標準，設定 html 根標籤為 40px，其他螢幕按比例做適配。

<script type="text/javascript">
//側滑顯示刪除按鈕
var expansion = null; //是否存在展開的list
var container = document.querySelectorAll('.cart-buy li');
for(var i = 0; i < container.length; i++){    
    var x, y, X, Y, swipeX, swipeY;
    container[i].addEventListener('touchstart', function(event) {
        x = event.changedTouches[0].pageX;
        y = event.changedTouches[0].pageY;
        swipeX = true;
        swipeY = true ;
        /*if(expansion){   //判斷是否展開，如果展開則收起
            expansion.className = "";
        } */       
    });
    container[i].addEventListener('touchmove', function(event){

        X = event.changedTouches[0].pageX;
        Y = event.changedTouches[0].pageY;        
        // 左右滑動
        if(swipeX && Math.abs(X - x) - Math.abs(Y - y) > 0){
            // 阻止事件冒泡
            event.stopPropagation();
            if(X - x > 10){   //右滑
                event.preventDefault();
                this.className = "";    //右滑收起
            }
            if(x - X > 10){   //左滑
                event.preventDefault();
                this.className = "swipeleft";   //左滑展開
                expansion = this;
            }
            swipeY = false;
        }
        // 上下滑動
        if(swipeY && Math.abs(X - x) - Math.abs(Y - y) < 0) {
            swipeX = false;
        }        
    });
}
</script>

一段檢測左右滑動的 js，該部分可不詳細看，直接使用即可。

Effection. 效果