//左右滑动翻页
$("#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" οnclick="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" οnclick="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('单击');
// }
});
JavaScript+jQuery手机端左右滑动事件
最新推荐文章于 2024-08-27 16:05:08 发布