JavaScript+jQuery手机端左右滑动事件

1 篇文章 0 订阅
1 篇文章 0 订阅

//左右滑动翻页
$("#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('单击');    
//  }
});

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值