jquery/zepto仿手机app左滑删除效果

jquery/zepto仿手机app左滑删除效果

在给你们重新贴一遍，原理自己要弄懂。我写的水平也有限，希望diss我的时候能拿出代码。不要光嘴炮。

html

css里列表内容正常布局，删除键（class=”addit”）用绝对定位（position：absolute；top: 0px;right:0px;），记得绝对定位的父级要加上（position：relative；）

绝对定位和相对定位的区别请点击这里~~~

<div style="position: relative">
    <div class="apply">
        <div class="item">
            <a href="javascript:void(0)">
                <div class="pic"><img src="img/message/z_message4.png"/></div>
                <div class="name">
                    <span class="fl">订单通知</span>
                    <span class="fr f_clr99">2016-05-12</span>
                </div>
            </a>
        </div>
    </div>
    <div class="addit delete">删除</div>
</div>

css

<style>
    .fl {
        float: left;
    }

    .fr {
        float: right;
    }

    .apply {
        display: block;
        height: 3.1rem;
        border-bottom: 1px solid #eee;
        position: relative;
        zoom: 1;
        overflow: hidden;
        padding: 0 .75rem;
    }

    .apply .item div {
        font-size: .7rem;
    }

    .apply .pic {
        width: 2.25rem;
        height: 2.25rem;
        margin-top: .35rem;
        float: left;
    }

    .apply .pic img {
        width: 100%;
        height: 2.25rem;
    }

    .apply .name2 {
        margin-left: 2.75rem;
        padding-top: .6rem;
    }

    .apply .name2 span {
        display: block;
    }

    .addit {
        height: 3.1rem;
        line-height: 3.1rem;
        position: absolute;
        right: 0rem;
        width: 0rem;
        top: 0;
        background: red;
        color: #fff;
        text-align: center;
    }
</style>

js

记得要引库文件

<script src="https://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

下面代码原理，向左滑动时触发事件，将整个.item向左移动空出来删除键的位置，再把删除键显现就可以了（重要的是(‘.item’)，(‘.delete’)和(‘.addit’)其它class可忽略）

    $('.apply').on("swipeleft", function () {//左滑显示隐藏按键
        console.log("lll")
        $(this).animate({left: '-3rem'}, 200, 'linear');
        $(this).siblings('.addit').animate({width: '3rem'}, 200, 'linear');
        // $(this).parent('li').siblings('li').find('.apply').animate({left: '0'}, 200).siblings('.addit').animate({width: '0'}, 200);
    });
    $('.apply').on("swiperight", function () {//右滑恢复
        $(this).animate({left: '0'}, 200, 'linear');
        $(this).siblings('.addit').animate({width: '0rem'}, 200, 'linear');
    });
    $('.delete').on("tap", function () { //删除
        $(this).parent().remove();
    });

来源：CSDN

作者：张井乙ccccyc

链接：https://blog.csdn.net/qq_29783621/article/details/52368266