当前位置:千赢国际官网 > 千赢网页手机版登入 > js的上拉下拉刷新时无法回弹的解决方法,附源码

js的上拉下拉刷新时无法回弹的解决方法,附源码

文章作者:千赢网页手机版登入 上传时间:2019-07-12
<script src="js/jquery-1.x.x.min.js"></script>
<script src="js/jquery.timelinr-0.9.x.js"></script>

您可能感兴趣的文章:

  • jQuery simplePage AJAX plus分页插件用法实例
  • jQuery ajax分页插件实例代码
  • jquery ajax分页插件的简单实现
  • 基于jquery实现表格无刷新分页
  • 使用JQuery实现的分页插件分享
  • jQuery Ajax实现无刷新分页
  • jQuery实现的仿百度分页足迹效果代码
  • jquery实现的伪分页效果代码
  • 自己动手写的jquery分页控件(非常简单实用)
  • jQuery无刷新分页完整实例代码
  • 基于jQuery实现的无刷新表格分页实例
  onScrollMove: function () {
   if((this.y < this.maxScrollY) && (this.pointY < 1)){
    this.scrollTo(0, this.maxScrollY, 400);
    return;
   } else if (this.y > 0 && (this.pointY > window.innerHeight - 1)) {
    this.scrollTo(0, 0, 400);
    return;
   }

   ......
  }

您可能感兴趣的文章:

  • 利用Jquery实现几款漂亮实用的时间轴(附示例代码)
  • jQuery HTML5 CSS3制作支持响应式布局时间轴插件
  • 基于jQuery和CSS3制作响应式水平时间轴附源码下载
  • Jquery时间轴特效(三种不同类型)
  • jQuery插件Timelinr 实现时间轴特效
  • jQuery代码实现发展历程时间轴特效
  • jQuery时间轴插件使用详解
  • TimergliderJS 一个基于jQuery的时间轴插件
  • ThinkPHP jquery实现“加载更多”功能代码
  • jQuery模拟原生态App上拉刷新下拉加载更多页面及原理
  • jQuery AJAX实现无刷新下拉加载更多
  • 基于JQuery实现滚动到页面底端时自动加载更多信息
  • jQuery简易时光轴实现方法示例

下面是css和js方法

在onScrollMove方法中插入判断代码:

推荐阅读:之前分享过一款 jQuery实现企业发展简史时间轴特效源码 ,它的界面展示效果很不错。

图片 1

相信很多朋友也有自己的解决办法,只是没写出来,所以网上都搜不到解决方案。在很多QQ群里面也有很多人在问该怎么解决这个问题,所以我写这篇文章记录一下我的解决方案,希望对一些朋友有所帮助。

jquery.timelinr.js时间轴插件的配置参数有:

页面引用css和js,加载完成数据后,

上拉下拉刷新的主要代码:

初始化插件

.page_btn{padding-top:0px;}
.page_btn a{cursor:pointer;padding:5px;border:solid 1px #ccc;font-size:12px;}
.page_box{float:right;}
.num{padding:0 10px;}

您可能感兴趣的文章:

  • dropload.js插件下拉刷新和上拉加载使用详解
  • vue.js移动端app之上拉加载以及下拉刷新实战
  • angularjs实现上拉加载和下拉刷新数据功能
  • JS 插件dropload下拉刷新、上拉加载使用小结
  • JS CSS实现下拉刷新/上拉加载插件
  • 基于iscroll.js实现下拉刷新和上拉加载效果
  • js插件dropload上拉下滑加载数据实例解析
  • AngularJS上拉加载问题解决方法
  • 纯javascript实现简单下拉刷新功能
  • mescroll.js上拉加载下拉刷新组件使用详解

配置参数

//对tbody伪分页;pageDiv:用于显示分页数据的div tbodyId :tbody的ID,pageSize,分页数目
function pagiNation(pageDiv,tbodyId,pageSize){
  $("#" tbodyId " tr:gt(" (pageSize-1) ")").hide();//初始化,前面pageSize-1条数据显示,其他的数据隐藏。
  var total_q=$("#" tbodyId " tr").length;//总数据
  var current_page=pageSize;//每页显示的数据
  var current_num=1;//当前页数
  var total_page= Math.ceil(parseFloat(total_q)/parseFloat(current_page));//总页数
  var pagePlugIn = "" 
          "<a id="" tbodyId "_prev" class="prev">上一页</a>" 
          "" 
          "1" 
          "/" 
          "" 
          "<a id="" tbodyId "_next" class="next">下一页</a>" 
          "";
  $("#" pageDiv "").html(pagePlugIn);
  var next=$("#" tbodyId "_next");//下一页
  var prev=$("#" tbodyId "_prev");//上一页
  $("#" tbodyId "_total").text("");//显示总页数
  $("#" tbodyId "_total").text(total_page);//显示总页数
  $("#" tbodyId "_current_page").text("");//当前的页数
  $("#" tbodyId "_current_page").text(current_num);//当前的页数
  //下一页
 $("#" tbodyId "_next").unbind("click");
 $("#" tbodyId "_next").click(function(){
 if(current_num==total_page){
    return false;//如果大于总页数就禁用下一页
 }
 else{
   $("#" tbodyId "_current_page").text(  current_num);//点击下一页的时候当前页数的值就加1
   $.each($("#" tbodyId " tr"),function(index,item){
   var start = current_page* (current_num-1);//起始范围
   var end = current_page * current_num;//结束范围
   if(index >= start && index < end){//如果索引值是在start和end之间的元素就显示,否则就隐
    $(this).show();
   }else {
   $(this).hide();
   }
 });
 }
});
//上一页方法
$("#" tbodyId "_prev").unbind("click");
$("#" tbodyId "_prev").click(function(){
  if(current_num==1){
    return false;
  }else{
    $("#" tbodyId "_current_page").text(--current_num);
    $.each($("#" tbodyId " tr"),function(index,item){
    var start = current_page* (current_num-1);//起始范围
    var end = current_page * current_num;//结束范围
    if(index >= start && index < end){//如果索引值是start和end之间的元素就显示,否则就隐藏
      $(this).show();
    }else {
      $(this).hide();
    }
  });
}
})
  $("#" pageDiv "").show();
}

页面无法弹回的原因在于:手指划出屏幕后touchend事件无法触发,回弹动画就无法执行。解决办法就是:当手指接近屏幕边缘的时候,手动触发动画方法。

本文由千赢国际官网发布于千赢网页手机版登入,转载请注明出处:js的上拉下拉刷新时无法回弹的解决方法,附源码

关键词: 千赢国际官网