iscroll实现移动端下拉刷新，上拉加载更多
js菜鸡-------自我记录
html页面：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<meta name="format-detection" content="telephone=no">
<meta name="format-detection" content="address=no">
<title>iscroll-测试</title>
<link href="css/reset.css" rel="stylesheet" type="text/css">
<link href="css/cm.css" rel="stylesheet" type="text/css">
</head>
<style>
span{display:block;width:100%;text-align:center;}
</style>
<body>
<div id="wrapper">
<div id="scroller">
<div id="pullDown">
<span class="pullDownIcon"></span><span class="pullDownLabel">下拉刷新</span>
</div>
<!--信息列表-->
<ul id="thelist">
<div class="cm-v2 no-border">
<section class="doc-box">
<ul class="doctorUlList" id="doctorUlListAuto">
<!--此处展示具体信息 -->
</ul>
</section>
</div>
</ul>
<div id="pullUp">
<span class="pullUpIcon"></span><span class="pullUpLabel" >查看更多</span>
</div>
</div>
</div>
<div id="footer"></div>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/iscroll.js"></script>
<script type="text/javascript" src="js/getList-iscroll.js"></script>
<script type="text/javascript"> var currentPage = 1; Ajax(currentPage); var myScroll,
pullDownEl, pullDownOffset,
pullUpEl, pullUpOffset; function loaded() {
pullDownEl = document.getElementById('pullDown');
pullDownOffset = pullDownEl.offsetHeight;
pullUpEl = document.getElementById('pullUp');
pullUpOffset = pullUpEl.offsetHeight; myScroll = new iScroll('wrapper', {
useTransition: true,
topOffset: pullDownOffset,
onRefresh: function () {
if (pullDownEl.className.match('loading')) {
pullDownEl.className = '';
pullDownEl.querySelector('.pullDownLabel').innerHTML = 'refresh...';
} else if (pullUpEl.className.match('loading')) {
pullUpEl.className = '';
pullUpEl.querySelector('.pullUpLabel').innerHTML = 'load more...';
}
},
onScrollMove: function () {
if (this.y > 5 && !pullDownEl.className.match('flip')) {
pullDownEl.className = 'flip';
pullDownEl.querySelector('.pullDownLabel').innerHTML = 'refresh...';
this.minScrollY = 0;
} else if (this.y < 5 && pullDownEl.className.match('flip')) {
pullDownEl.className = '';
pullDownEl.querySelector('.pullDownLabel').innerHTML = 'refresh...';
this.minScrollY = -pullDownOffset;
} else if (this.y < (this.maxScrollY - 5) && !pullUpEl.className.match('flip')) {
pullUpEl.className = 'flip';
pullUpEl.querySelector('.pullUpLabel').innerHTML = 'refresh...';
this.maxScrollY = this.maxScrollY;
} else if (this.y > (this.maxScrollY + 5) && pullUpEl.className.match('flip')) {
pullUpEl.className = '';
pullUpEl.querySelector('.pullUpLabel').innerHTML = 'load more...';
this.maxScrollY = pullUpOffset;
}
},
onScrollEnd: function () {
if (pullDownEl.className.match('flip')) {
pullDownEl.className = 'loading';
pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Loading...';
pullDownAction();
} else if (pullUpEl.className.match('flip')) {
pullUpEl.className = 'loading';
pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Loading...';
pullUpAction();
}
}
});
setTimeout(function () { document.getElementById('wrapper').style.left = '0'; }, 800);
} function pullDownAction () {
window.location.reload();
}
function pullUpAction () {
var page = currentPage++;
Ajax(page);
myScroll.refresh();
} document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false);
</script>
</body>
</html>
ajax请求后台数据：
/**
* Created by jstarseven on 2016/3/7.
*/
function Ajax(page) {
$.ajax({
type: "post",
dataType: "JSON",
url: "http://xx.xxxxxx.com/wx_service/getList",
data: {'page': page},
success: function (data) { var item = '';
$.each(data, function (i, result) {
var skill = result['skill'];
item += '<li>';
item += '<a href="getDoctorDetail.html?doctorId=' + result['doctorId'] + '">';
item += '<div class="doc-pic"><img id="headPicUrl" src="' + result['headPicUrl'] + '" alt=""></div>';
item += '<div class="doc-info">';
item += '<h4><span>' + result['doctorName'] + '</span> <span>' + result['doctorTitle'] + '</span></h4>';
item += '<p class="c-666">' + result['hospitalName'] + '</p>';
item += '<p class="shanchang" id="skillBegin">'; $.each(skill, function (i) {
item += '<span>' + skill[i] + '</span>';
}) item += '</p>';
item += '<div class="feiyong">';
item += '<span class="s1">¥ <span>' + result['consultPrice'] + '</span>/次</span>';
item += '<span class="s2"><span>' + result['payNumber'] + '</span>人付款，<span>' + result['praisePercent'] + '</span> 好评</span>';
item += '</div>';
item += '</div>';
item += '</a>';
item += '</li>';
});
$('.doctorUlList').append(item);
},
error: function () {
console.log("当前请求失败");
}
});
}
-END-
iscroll实现移动端下拉刷新，上拉加载更多的更多相关文章
- SwipeRefreshLayout实现下拉刷新上滑加载
1. 效果图 2.RefreshLayout.java package myapplication.com.myapplication; import android.content.Context; ...
- Android 下拉刷新上啦加载SmartRefreshLayout + RecyclerView
在弄android刷新的时候,可算是耗费了一番功夫,最后发觉有现成的控件,并且非常好用,这里记录一下. 原文是 https://blog.csdn.net/huangxin112/article/de ...
- juery下拉刷新，div加载更多元素并添加点击事件(二)
buffer.append("<div class='col-xs-3 "+companyId+"' style='padding-left: 10px; padd ...
- 移动端下拉刷新上拉加载-mescroll.js插件
最近无意间看到有这么一个上拉刷新下拉加载的插件 -- mescroll.js,个人感觉挺好用的,官网地址是:http://www.mescroll.com 然后我就看了一下文档,简单的写了一个小dem ...
- Android如何定制一个下拉刷新，上滑加载更多的容器
前言 下拉刷新和上滑加载更多,是一种比较常用的列表数据交互方式. android提供了原生的下拉刷新容器 SwipeRefreshLayout,可惜样式不能定制. 于是打算自己实现一个专用的.但是下拉 ...
- Android 自定义 ListView 上下拉动“刷新最新”和“加载更多”歌曲列表
本文内容 环境 测试数据 项目结构 演示 参考资料 本文演示,上拉刷新最新的歌曲列表,和下拉加载更多的歌曲列表.所谓"刷新最新"和"加载更多"是指日期.演示代码 ...
- 基于SwiperJs的H5/移动端下拉刷新上拉加载更多的效果
最早时,公司的H5项目中曾用过点击一个"加载更多"的DOM元素来实现分页的功能,后来又用过网上有人写的一个上拉加载更多的插件,那个插件是页面将要滚动到底部时就自动请求数据并插入到页 ...
- 基于SwiperJs的H5/移动端下拉刷新上拉加载更多
最早时,公司的H5项目中曾用过点击一个"加载更多"的DOM元素来实现分页的功能,后来又用过网上有人写的一个上拉加载更多的插件,那个插件是页面将要滚动到底部时就自动请求数据并插入到页 ...
- vue10行代码实现上拉翻页加载更多数据，纯手写js实现下拉刷新上拉翻页不引用任何第三方插件
vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件/库 一提到移动端的下拉刷新上拉翻页,你可能就会想到iScroll插件,没错iScroll是一个高性能,资源 ...
- JS+CSS实现的下拉刷新/上拉加载插件
闲来无事,写了一个当下比较常见的下拉刷新/上拉加载的jquery插件,代码记录在这里,有兴趣将代码写成插件与npm包可以留言. 体验地址:http://owenliang.github.io/pull ...
随机推荐
- jQuery数字加减插件
jQuery数字加减插件 我们在网上购物提交订单时,在网页上一般会有一个选择数量的控件,要求买家选择购买商品的件数,开发者会把该控件做成可以通过点击实现加减等微调操作,当然也可以直接输入数字件数.本文 ...
- 自己编译的openwrt在开机时一直打印jffs2_scan_eraseblock(): Magic bitmask 0x1985 not found...的错误提示
具体的输入信息是这样的. uboot> http Link down: eth0 Ethernet mode (duplex/speed): / Mbps HTTP server is star ...
- leetcode[50] N-Queens
题目:给定一个n,那么在n*n的棋盘里面放国际象棋的皇后,皇后之间互不在攻击范围.(皇后的攻击范围是她所在位置的哪一行,那一列,和她的正负1的对角线) The n-queens puzzle is t ...
- JJG 623-2005 电阻应变仪计量检定规程
JJG 623-2005 电阻应变仪计量检定规程 点击下载 JJG533-2007标准模拟应变量校准器检定规程 点击下载 JJG 533-1988标准(里面含有一些更具体的电路图供参考)
- html5 Canvas画图3：1px线条模糊问题
点击查看原文地址: html5 Canvas画图3:1px线条模糊问题 本文属于<html5 Canvas画图系列教程> 接上一篇canvas画线条教程 上次我们讲到,canvas有时候会 ...
- 松瀚SN8P2501 定时器初始化程序--汇编源码
/* 松瀚 SN8P2501B 定时器初始化程序 */ INI_IRQ: ;定时器T0初始化 MOV A, #01100000b ;定时器模式Fcpu/4 16M/4/4=1M 1U计一次 B0MOV ...
- .NET源码
值得珍藏的.NET源码,不保存就没机会了 很早以前,我们通过http://referencesource.microsoft.com/netframework.aspx可以下载到.NET的各版本公开源 ...
- Ninject的项目情况
Ninject的项目情况 首先,它有很多的项目组成,适合不同的环境,当然它有几个基本的核心库. 为什么它会有这么多的库呢?因为轻量级,易于使用和被扩展是它的目标,代码越是少,你使用代码的可能性越高嘛. ...
- PLAN: 入门题目
一道道刷完它! A07, A11, A12, A14, A15, A18, A22, A24, A25, A26, A27 A29, A32, A34, A59, A66, A69, A84, B24 ...
- Parameter Binding in ASP.NET Web API(参数绑定)
Parameter Binding in ASP.NET Web API(参数绑定) 导航 阅读本文之前,您也可以到Asp.Net Web API 2 系列导航进行查看 http://www.cnbl ...