實現一個左滑刪除功能

移動端開發中，左滑刪除功能是很常見的，比如系統通知、微信聊天列表.. 最近在開發一個卡片式布局的h5頁面中，就有一個這樣的需求，於是我先寫了一個dome，整理一下思路，順便也簡單寫個總結。

思路： 有兩個都是絕對定位的div層：內容和刪除，內容width:100%，刪除區域z-index比內容區域小，且right：0。然后通過touchstart、touchend事件，判斷滑動的方向，如果是向左滑動，即觸發相應的回調函數。

滑動方向判斷思路： 首先通過touchstart監聽到第一次觸摸屏幕點的x1、y1坐標，再通過touchmove監聽到手指移動過程中點的x2、y2坐標，如果x2 - x1 < z (z為緩沖距離且z > 0 )即說明是左滑。

效果如圖

css：

.pro-list {
        position: relative;
        color: white;
        text-align: center;
        margin-top: 100px;
        padding: 2rem;
        box-sizing: border-box;
        line-height: 4;
    }

    .pro-list>.li-pro-main {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: 2;
        background: pink;
        transition: .4s;
    }
    .pro-list>.li-del-btn {
        position: absolute;
        right: 0;
        top: 0;
        width: 20%;
        height: 100%;
        background-color: red;
        z-index: 1;
        transition: .4s;
    }

html：

<div class="li-module li-row pro-list">
    <div class="li-pro-main">
        左滑試試
    </div>
    <div class="li-del-btn">
        刪除
    </div>
</div>

核心js：

require(['jquery','touch','li2'], function($){
    var testTouchLeft = {
        init: function(){
            this.renderHtml();
            this.watch();
        },
        renderHtml: function(){
            this.overscroll(document.querySelector('.li-module'))
        },

        overscroll: function(el){
            el.addEventListener('touchstart', function(event) {
                var top = el.scrollTop,
                    totalScroll = el.scrollHeight,
                    currentScroll = top + el.offsetHeight;
                
                if(top === 0) {
                    el.scrollTop = 1;
                }else if(currentScroll === totalScroll) {
                    el.scrollTop = top - 1;
                }

                window.touchMain.touchStart(event);
            });
            el.addEventListener('touchmove', function(event) {
                if(el.offsetHeight < el.scrollHeight)
                    event.isScroller = true;
            });
        },

        watch: function(){
            $('.li-del-btn').on('click',function(){
                $('.li-pro-main,.li-del-btn,.pro-list').css('height',0)

                setTimeout(function(){
                    $('.li-pro-main,.li-del-btn,.pro-list').remove();

                    $.successShow('刪除成功')
                },400)
            })


            document.body.addEventListener('touchmove', function(event) {
                if(!event.isScroller) {
                    event.preventDefault();
                }

                window.touchMain.touchMove2(event,function(){
                    $('.li-pro-main').css({
                        'left':'-20%'
                    })
                },function(){
                    $('.li-pro-main').css({
                        'left':'0%'
                    })
                })
            })
        }
    }
    testTouchLeft.init();
})

比較簡單，requirejs的一些依賴就不多說了。完整代碼 https://github.com/helijun/component/blob/master/touch/testTouchLeft.html