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