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

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; //是否存在展开的listvar 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. 效果