手机左滑删除js插件zepto.touchWipe.js

zepto.touchWipe.js实现了类似QQ中对联系人的操作：向左滑动，滑出删除按钮。滑动超过一半时松开则自动滑到底，不到一半时松开则返回原处。作者：i暖风，来源：https://www.cnblogs.com/woodk/p/5360494.html。感谢作者的无私奉献。

注：我对这个插件进行了小修改，原来的点击删除按钮没有效果，删除按钮仅用来进行测量宽度。我给他加上了点击删除的功能，前提是，在写html的时候，删除按钮必须是滑动的列表项的子元素，因为删除行时，是通过parent查找的。
1、css代码

<style>
    * {
        padding: 0;
        margin: 0;
        list-style: none;
    }
    
    header {
        background: #f7483b;
        border-bottom: 1px solid #ccc
    }
    
    header h2 {
        text-align: center;
        line-height: 54px;
        font-size: 16px;
        color: #fff
    }
    
    .list-ul {
        overflow: hidden
    }
    
    .list-li {
        line-height: 60px;
        border-bottom: 1px solid #fcfcfc;
        position: relative;
        padding: 0 12px;
        color: #666;
        background: #f2f2f2;
        -webkit-transform: translateX(0px);
    }
    
    .btn {
        position: absolute;
        top: 0;
        right: -80px;
        text-align: center;
        background: #ffcb20;
        color: #fff;
        width: 80px
    }
</style>

2、html代码

<section class="list">
    <ul class="list-ul">
        <li id="li" class="list-li">
            <div class="con">
                你的快递到了，请到楼下签收
            </div>
            <div class="btn">删除</div>
        </li>
        <li class="list-li">
            <div class="con">
                哇，你在干嘛，快点来啊就等你了
            </div>
            <div class="btn">删除</div>
        </li>
    </ul>
</section>

3、引入js，并调用：

<script src="http://apps.bdimg.com/libs/zepto/1.1.4/zepto.min.js"></script>
<script src="zepto.touchWipe.js"></script>
<script>
$(function() {
    $('.list-li').touchWipe({
        itemDelete: '.btn'
    });
})
</script>