WeUI样式库+Div/Ul 的列表模拟移动端左划删除效果

我是在MVC中通过动态创建的方式来创建div列表的，使用的WeUI样式库，也可以使用UL标签来做 原理一样

    <div class="weui-panel__bd" style="padding: 10px 15px;">
        <div class="weui-cells" style="margin-top: 0px">
            @foreach (var itemMod in item.Value)
            {
                <div class="weui-cell weui-cell_swiped">
                    <div class="weui-cell__bd" data-id="@itemMod.InvoiceID">
                        <div class="weui-cell" style="padding: 0px 10px;">
                            <div class="weui-cell__hd" style="position: relative; margin-right: 10px;" 
                                data-Img="background-image:url(@itemMod.MobileImagePath)">
                                <img src="@itemMod.MobileImagePath" style=" 50px; display: block" />
                            </div>
                            <div class="weui-cell__bd">
                                <p>@itemMod.No</p>
                                <p style="font-size: 13px; color: #888888;">@itemMod.Account / @itemMod.AuditYearMonth</p>
                            </div>
                        </div>
                    </div>
                    <div class="weui-cell__ft">
                        <a class="weui-swiped-btn weui-swiped-btn_warn" href="javascript:">删除</a>
                    </div>
                </div>
            }
        </div>
    </div> 

然后js通过绑定移动端事件实现效果，事件是用的手机通用事件，如果使用了手机框架，可使用手机框架的事件，

如 Jquery Mobile 框架 就有 

swipe　　　　当用户在元素上水平滑动时触发。
swipeleft 　　 当用户从左划过元素超过 30px 时触发。
swiperight 　  当用户从右划过元素超过 30px 时触发。

 $(function () {
    InitDelSwipe();
});

function InitDelSwipe() {
    function prevent_default(e) {
        e.preventDefault();
    }
    function disable_scroll() {
        $(document).on('touchmove', prevent_default);
    }
    function enable_scroll() {
        $(document).unbind('touchmove', prevent_default);
    }

    var x;
    $('.weui-cell_swiped div:first-child')
        .on('touchstart', function (e) {
            $('.weui-cell_swiped div:first-child').css('transform', 'translateX(0px)');
            x = e.originalEvent.targetTouches[0].pageX;
        })
        .on('touchmove', function (e) {
            var change = e.originalEvent.targetTouches[0].pageX - x;
            change = Math.min(Math.max(-100, change), 0);
            $(e.currentTarget).css('transform', 'translateX(' + change + 'px)');
            if (change < -10) {
                disable_scroll();
            }
        })
        .on('touchend', function (e) {
            var tran = parseInt($(e.currentTarget).css("transform").replace(/[^0-9-,]/g, '').split(',')[4]);
            var newTran;
            if (tran < -40) {
                newTran = '-80px';
            } else if (tran > 40) {
                newTran = '80px';
            } else {
                newTran = '0px';
            }
            $(e.currentTarget).animate({ transform: 'translateX(' + newTran + 'px)' }, 200);
            enable_scroll();
        });

    $('.weui-cell_swiped .weui-cell__ft').on('touchend', function (e) {
        e.preventDefault()
        $(this).prev().slideUp('fast', function () {
            var data = { dataId: $(this).attr("data-id") };
            jQuery.WY.ajaxHandle("/Business/ChangShaZJ/NInvoice/Delete", data, function (rlt) {
                if (rlt.isSuccess) {
                    $(this).parent().remove();
                }
                else {
                    alert(rlt.errorMesg);
                }
            });
        })
    });
}

CSS样式重写，加动画效果；transition 的transition-property 属性给transform 即可，如果写all 会影响删除的slideUp 过渡动画效果

.weui-cell_swiped div:first-child {
    transition: transform .5s ease .1s;
}

.weui-swiped-btn {
    padding: 50% 1em;
}