【前端开发实例】移动端购物车左滑删除 -（七）

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.00span>p>
                    <p>x<span class="reconum">1span>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. 效果