js 下拉刷新页面

最新推荐文章于 2024-03-11 16:55:34 发布

zhaoqhu

最新推荐文章于 2024-03-11 16:55:34 发布

阅读量579

点赞数

分类专栏： HTML&CSS&Javascript

本文链接：https://blog.csdn.net/u011504963/article/details/109628367

版权

HTML&CSS&Javascript 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

使用场景

当网页中开启了支持web App全屏模式运行时，从移动端桌面点击应用图标进入网站后，界面上看不到地址栏，这时候网页中有下拉刷新的功能时，体验会好一些。

关键词

mobile web app capable
pull to refresh
release updates

<html>
<head>
</head>
<body>
<div class="yxa-pull-refresh-wrap" id="yxaPullRefreshWrap">
	<div class="refresh-load-before-box" id="refreshLoadBeforeBox">
	  <span class="pull-refresh-icon"> </span><span class="pull-refresh-content" id="pullRefreshContent"></span>
	</div>
	<div class="refresh-loading-box acu-display-none" id="refreshLoadingBox">
	  <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
	  <span><?=$LanMsg['pull_to_refresh']['loading']?></span>
	</div>
</div>
<div class="yxa-content" id="yxaContent">
</div>
<script type="text/javascript">
var gTouchStartPageY = 0;
var gTouchPageYDis = 0;
var gPullRefreshTimer = null;
var gTouchTranslateY = 0;
function pullRefreshPage(){
  $("#yxaContent").on('touchstart',function(event){
    gTouchStartPageY = event.targetTouches[0].pageY;
    console.log('touchstart gTouchStartPageY:',gTouchStartPageY);
  });
  
  $("#yxaContent").on('touchmove',function(event){
    touchMovePageY = event.targetTouches[0].pageY;
    gTouchPageYDis = touchMovePageY - gTouchStartPageY;
    gTouchTranslateY = gTouchPageYDis/1.5;  
    if(gTouchPageYDis > 0){
      //alert('scrollTop:'+$(window).scrollTop()+'gTouchStartPageY:'+gTouchStartPageY);
      if($(window).scrollTop() <= 0){
        if(event.cancelable){
          event.preventDefault();
        }
      }
      //$("#yxaContent,#yxaPullRefreshWrap,#footerApp").css({'transform': 'translateY('+gTouchTranslateY+'px)'});
      $("#yxaContent,#yxaPullRefreshWrap,#footerApp").css({'transform': 'translate3d(0px,'+gTouchTranslateY+'px,0px)'});
      if(gTouchTranslateY > 35){
        $('.pull-refresh-icon').addClass('up');
        $('#pullRefreshContent').html('↑释放更新');
      }else{
        $('#pullRefreshContent').html('↓下拉刷新');
        $('.pull-refresh-icon').removeClass('up');
      }
      console.log('touchmove touchMovePageY:',touchMovePageY);
    }
  });
  $("#yxaContent").on('touchend',function(event){
    if(gTouchTranslateY > 35){
      //$("#yxaContent,#yxaPullRefreshWrap,#footerApp").css({'transform': 'translateY(30px)'});
      $("#yxaContent,#yxaPullRefreshWrap,#footerApp").css({'transform': 'translate3d(0px,30px,0px)'});
      $("#refreshLoadBeforeBox").hide();
      if(gPullRefreshTimer){
        clearTimeout(gPullRefreshTimer);
      }
      $("#refreshLoadingBox").show();
      setTimeout(function(){
        $.get('../db/goods.php?act=init&load_all=0&page='+1,function(data){
          gIsRequestPage = 1;
          gPage =1;
          dataObj = eval('('+data+')');
          //confMyListApp.confMyArr.push(dataObj.data);
          confMyListApp.confMyArr = dataObj.data;
          //confMyListApp.confMyArr = dataObj.data;
          $("#refreshLoadBeforeBox").show();
          $("#refreshLoadingBox").hide();
          gTouchTranslateY = 0;
          $('#pullRefreshContent').html('↓下拉刷新');
          $('.pull-refresh-icon').removeClass('up');
          //$("#yxaContent,#yxaPullRefreshWrap,#footerApp").css({'transform': 'translateY(0px)'});
           $("#yxaContent,#yxaPullRefreshWrap,#footerApp").css({'transform': 'translate3d(0px,0px,0px)'});
          $("#pageLoding").removeClass('acu-display-block').addClass('acu-display-none');
          $("#pageLodingOver").removeClass('acu-display-block').addClass('acu-display-none');
        })
      },500);
    }else{
      if(gTouchPageYDis != 0){
        //$("#yxaContent,#yxaPullRefreshWrap,#footerApp").css({'transform': 'translateY(0px)'});
         $("#yxaContent,#yxaPullRefreshWrap,#footerApp").css({'transform': 'translate3d(0px,0px,0px)'});
      }
    }
    gTouchPageYDis = 0;
  });
}
</script>
</boyd>
</html>