1. 程式人生 > >JavaScript+jQuery手機端左右滑動事件

JavaScript+jQuery手機端左右滑動事件

//左右滑動翻頁
$("#wrapper").on("touchstart", function(e) {
    // 判斷預設行為是否可以被禁用
    if (e.cancelable) {
        // 判斷預設行為是否已經被禁用
        if (!e.defaultPrevented) {
            e.preventDefault();
        }
    }   
    startX = e.originalEvent.changedTouches[0].pageX,
    startY = e.originalEvent.changedTouches[0].pageY;
});
$("#wrapper").on("touchend", function(e) {         
    // 判斷預設行為是否可以被禁用
    if (e.cancelable) {
        // 判斷預設行為是否已經被禁用
        if (!e.defaultPrevented) {
            e.preventDefault();
        }
    }               
    moveEndX = e.originalEvent.changedTouches[0].pageX,
    moveEndY = e.originalEvent.changedTouches[0].pageY,
    X = moveEndX - startX,
    Y = moveEndY - startY;
    //左滑
    if ( X > 0 ) {
        //alert('左滑'); 
        pulldownRefresh();
        if(true) {
                        var table = document.body.querySelector('.mui-table-view');
                        var li = document.createElement('li');
                        li.className = 'mui-table-view-cell';
                        var downRefreshDiv = '<div class="news-item" onclick="openNews(7)">';
                        downRefreshDiv += '<img src="../../img/news/list/7.jpg">';
                        downRefreshDiv += '<div class="item-middle">';
                        downRefreshDiv += '<div class=""><span class="title-height">鐵人學院首期勞模、工匠(技能專家)培訓班圓滿結束</span></div>';
                        downRefreshDiv += '<div class="item-middle-date">2018-04-04 18:00:00</div>';
                        downRefreshDiv += '</div>';
                        downRefreshDiv += '</div>';
                        li.innerHTML = downRefreshDiv;
                        //下拉重新整理,新紀錄插到最前面;
                        table.insertBefore(li, table.firstChild);
                    }
    }
    //右滑
    else if ( X < 0 ) {
        //alert('右滑');    
        //pulldownRefresh();
        if(true) {
                        var table = document.body.querySelector('.mui-table-view');
                        var li = document.createElement('li');
                        li.className = 'mui-table-view-cell';
                        var downRefreshDiv = '<div class="news-item" onclick="openNews(0)">';
                        downRefreshDiv += '<img src="../../img/news/list/0.jpg">';
                        downRefreshDiv += '<div class="item-middle">';
                        downRefreshDiv += '<div class=""><span class="title-height">首期全國能源化學地質系統全國勞模、大國工匠、五一勞動獎章獲得者培訓班圓滿落幕</span></div>';
                        downRefreshDiv += '<div class="item-middle-date">2018-07-25 17:38:13</div>';
                        downRefreshDiv += '</div>';
                        downRefreshDiv += '</div>';
                        li.innerHTML = downRefreshDiv;
                        //下拉重新整理,新紀錄插到最前面;
                        table.insertBefore(li, table.firstChild);
                    }
    }
//  //下滑
//  else if ( Y > 0) {
//      alert('下滑');    
//  }
//  //上滑
//  else if ( Y < 0 ) {
//      alert('上滑');    
//  }
//  //單擊
//  else{
//      alert('單擊');    
//  }
});