首先对iscroll的scrollTo方法进行稍微修改如下图:

对iscroll滑动到屏幕边缘不能弹回的bug进行修复,如下代码:

function scrollbug() {
var self = this;
if (this.maxScrollY - this.y > 50) {
var load = $(self.wrapper).find("div.load-more");
load.find("span.load-text").text("放开加载跟多");
load.find("span.down-icon").removeClass("up-icon");
} else { var load = $(self.wrapper).find("div.load-more");
load.find("span.load-text").text("上拉加载更多");
load.find("span.down-icon").addClass("up-icon");
}
if (self.y > 50) {
var load=$(self.wrapper).find("div.load-refresh");
load.find("span.load-text").text("放开刷新");
load.find("span.down-icon").addClass("up-icon");
} else {
var load = $(self.wrapper).find("div.load-refresh");
load.find("span.load-text").text("下拉刷新");
load.find("span.down-icon").removeClass("up-icon");
}
///修复代码
if ((self.y <= self.maxScrollY) && (self.pointY < 45) && self.options.border) {
self.options.border = false;
self.scrollTo(0, self.maxScrollY, 400);
setTimeout(function () { self.options.border = true; }, 400);
return false;
} else if (self.y > 0 && (self.pointY > window.innerHeight - 1) && self.options.border) {
self.options.border = false;
self.scrollTo(0, 0, 400);
setTimeout(function () { self.options.border = true; }, 400);
return false;
} };

  html代码结构如下:

<section class="s-content" id="scroller">
<div class="scroller">
<div class="load-refresh" style="background-color: transparent;">
<span class="down-icon"></span><span class="load-text">下拉刷新</span>
</div>
<ul class="text-list" >
</ul>
<div class="load-more">
<span class="down-icon"></span><span>上拉加载更多</span>
</div>
</div>
</section >

  

js代码:

//border用于判断是否复原到顶部或底部,用于避免多次触发。
document.body.onload = function () {
var option = { probeType: 1, mouseWheel: true, fadeScrollbars: false, click: true, tap: true, border: true };
myScroll = new IScroll('#scroller', option);
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
myScroll.on("scroll", scrollbug);
myScroll.on("slideDown", function () {
var self = this;
if (self.y > 50) {
var load = $(self.wrapper).find("div.load-refresh");
self.scrollTo(0, 50);
setTimeout(function () { load.find("span.down-icon").addClass("load-icon"); }, 150);
$("#page-content").addClass("loading");
setTimeout(function () { load.find("span.load-text").text("加载中,请稍后..."); }, 100);
window.location.reload(true);
}
});
myScroll.on("slideUp", function () {
        var self = this;
           if (self.maxScrollY - self.y > 50) {
var bottom = +self.maxScrollY, load = $(self.wrapper).find("div.load-more");
             var pages = $("#activity-list").attr("data-page");
             if (pages != "ok") {//pages 页码如果是ok这表示是最后一页
               self.scrollTo(0, bottom - 50);
               load.find("span.down-icon").addClass("load-icon");
               $("body").addClass("loading");
               setTimeout(function () { load.find("span.load-text").text("加载中,请稍后..."); }, 100);
               pages = pages ? pages : 1;
               toPage({ pageNO: ++pages });
             }
           }
}); };

  css样式:

.s-content{
position:relative;
overflow:hidden;
width: 100%;
   -ms-touch-action: none;
   z-index:999999;
   -webkit-transform: translate3d(0,0,0);
   transform: translate3d(0,0,0);
-webkit-touch-callout: none;
  -webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;user-select: none;
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;
-o-text-size-adjust: none;
text-size-adjust: none;
}
.scroller {
position: absolute;
width: 100%;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;
-o-text-size-adjust: none;
text-size-adjust: none;
z-index:1;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}

  

  

  

  

最新文章

  1. Jmeter学习笔记TWO
  2. Struts2配置Result(Struts2_result)
  3. Query on a tree——树链剖分整理
  4. Ahjesus Nodejs01 环境搭建及运行
  5. BLE-NRF51822-实现简单扫描器
  6. 【maven】之开发pom配置常用插件
  7. [ActionScript 3.0] AS3 获取函数参数个数
  8. Linux 命令 - ftp: 网络文件传输工具
  9. Android(java)学习笔记204:自定义SmartImageView(继承自ImageView,扩展功能为自动获取网络路径图片)
  10. struts2整合spring出现的Unable to instantiate Action异常
  11. Qt读取ANSI格式文件——利用QTextCodec将其他编码格式转换为Unicode格式
  12. AWS之EC2远程登录
  13. OC中协议的概念以及用法
  14. cocos2dx三种定时器使用
  15. easyui datagrid load 封装 参数问题 js 作用域
  16. 使用Github搭建个人博客网站
  17. Leetcode 120
  18. Python高级特性: 12步轻松搞定Python装饰器
  19. 菜鸟学Java(九)——Servlet的基本配置
  20. 生成html报告并整合自动发动邮件功能

热门文章

  1. 详述JavaScript数组
  2. quagga源码分析--路由信息处理zebra-rib
  3. ps 如何裁切图片成一定的长宽高比例
  4. JavaScript中String.prototype.replace() 方法的使用
  5. XMLHttpRequest上传文件实现进度条
  6. VS插件-JSEnhancements
  7. B+树概念学习
  8. IMacro 脚本简记
  9. PHP学习资源
  10. Python学习笔记——基础篇【第七周】———FTP作业(面向对象编程进阶 &amp; Socket编程基础)