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('單擊');
// }
});