iscroll的下拉刷新,上拉翻页。

时间:2022-12-21 10:27:06

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

iscroll的下拉刷新,上拉翻页。

对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);
}

  

  

  

  

iscroll的下拉刷新,上拉翻页。的更多相关文章

  1. vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件

    vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件/库 一提到移动端的下拉刷新上拉翻页,你可能就会想到iScroll插件,没错iScroll是一个高性能,资源 ...

  2. JS&plus;CSS实现的下拉刷新&sol;上拉加载插件

    闲来无事,写了一个当下比较常见的下拉刷新/上拉加载的jquery插件,代码记录在这里,有兴趣将代码写成插件与npm包可以留言. 体验地址:http://owenliang.github.io/pull ...

  3. 基于SwiperJs的H5&sol;移动端下拉刷新上拉加载更多的效果

    最早时,公司的H5项目中曾用过点击一个"加载更多"的DOM元素来实现分页的功能,后来又用过网上有人写的一个上拉加载更多的插件,那个插件是页面将要滚动到底部时就自动请求数据并插入到页 ...

  4. 基于SwiperJs的H5&sol;移动端下拉刷新上拉加载更多

    最早时,公司的H5项目中曾用过点击一个"加载更多"的DOM元素来实现分页的功能,后来又用过网上有人写的一个上拉加载更多的插件,那个插件是页面将要滚动到底部时就自动请求数据并插入到页 ...

  5. react-native 模仿原生 实现下拉刷新&sol;上拉加载更多(RefreshListView)

    1.下拉刷新/上拉加载更多 组件(RefreshListView) src/components/RefreshListView/index.js /** * 下拉刷新/上拉加载更多 组件(Refre ...

  6. 带你实现开发者头条APP&lpar;五&rpar;--RecyclerView下拉刷新上拉加载

    title: 带你实现开发者头条APP(五)--RecyclerView下拉刷新上拉加载 tags: -RecyclerView,下拉刷新,上拉加载更多 grammar_cjkRuby: true - ...

  7. ListView实现Item上下拖动交换位置 并且实现下拉刷新 上拉加载更多

    ListView实现Item上下拖动交换位置  并且实现下拉刷新  上拉加载更多 package com.example.ListViewDragItem; import android.app.Ac ...

  8. &lbrack;ionic开源项目教程&rsqb; - 第7讲 实现下拉刷新上拉加载ion-refresher和ion-infinite-scroll

    第7讲 实现下拉刷新上拉加载ion-refresher和ion-infinite-scroll 1.将tab1.html的代码改为如下: <ion-content> <ion-ref ...

  9. ListView下拉刷新上拉加载更多实现

    这篇文章将带大家了解listview下拉刷新和上拉加载更多的实现过程,先看效果(注:图片中listview中的阴影可以加上属性android:fadingEdge="none"去掉 ...

  10. RecyclerView下拉刷新上拉加载(三)—对Adapter的封装

    RecyclerView下拉刷新上拉加载(一) http://blog.csdn.net/baiyuliang2013/article/details/51506036 RecyclerView下拉刷 ...

随机推荐

  1. Linux下php安装Redis扩展

    说明: 操作系统:CentOS php安装目录:/usr/local/php php.ini配置文件路径:/usr/local/php7/etc/php.ini Nginx安装目录:/usr/loca ...

  2. MySQL 5&period;6 双机热备windows7

    MySQL 5.6 双机热备 目录: 1.说明 2.数据手工同步 3.修改主数据库配置文件 4.修改从数据库配置文件 5.主数据库添加备份用户 6.从数据库设置为Slave 7.验证 1.说明 1)数 ...

  3. 《Linux内核分析》第一周 计算机是如何工作的?

    刘蔚然 原创作品转载请注明出处 <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000] WEEK ONE(2. ...

  4. Log4j用法

    本篇仅仅是简单介绍了在写一个测试例子时,怎么使用log4j的经验,如果用于生产环境,估计还需要在深入一步去了解更多详细的配置信息. log4j.properties 配置信息: log4j.rootL ...

  5. HW4&period;14

    public class Solution { public static void main(String[] args) { int count = 0; char asciiChar; for( ...

  6. SDL2源码分析6:拷贝到渲染器(SDL&lowbar;RenderCopy&lpar;&rpar;)

    ===================================================== SDL源码分析系列文章列表: SDL2源码分析1:初始化(SDL_Init()) SDL2源 ...

  7. django下命令行工具

    django-admin.py是Django的一个用户管理任务的命令行工具,manage.py是对django-admin.py的简单包装,每个Django Project里面都包含一个manage. ...

  8. PDB文件详解

    原文地址:http://blog.csdn.net/feihe0755/article/details/54233714 PDB文件的介绍 PDB(Program Data Base),意即程序的基本 ...

  9. SparkStreaming:关于checkpoint的弊端

    当使用sparkstreaming处理流式数据的时候,它的数据源搭档大部分都是Kafka,尤其是在互联网公司颇为常见. 当他们集成的时候我们需要重点考虑就是如果程序发生故障,或者升级重启,或者集群宕机 ...

  10. linux 查看、关闭 ssh pts&sol;n登录的用户

    1.查看登录用户: [root@TiaoBan- bin]# w :: up days, :, users, load average: 1.90, 1.75, 1.84 USER TTY FROM ...