首页 > 特效插件 > 其他特效 >  手机左滑删除js插件zepto.touchWipe.js正文

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

特效介绍
手机左滑删除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>