<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<meta name="apple-mobile-web-app-capable" content="yes">

<meta name="viewport" content="width=device-width,initial-scale=1.0,

maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">

<title>Document</title>

<link rel="stylesheet" type="text/css" href="public/reset.css">

<style type="text/css">

.top{

    top: 0;

}

.footer{

    bottom: 0;

}

.top,.footer{

    position: fixed;

    left: 0;

    text-align: center;

    line-height: 50px;

    height: 50px;

    width: 100%;

    background-color: #0dcecb;

    color: #fff;

    z-index: 100;

}

#wrapper{

    position: absolute;

    left: 0;

    top: 50px;

    bottom: 50px;

    width: 100%;

    background-color: #fafafa;

    z-index: 10;

}

.news-lists .item{

    height: 40px;

    line-height: 40px;

    border-bottom: 1px solid #CFCFCF;

}

#pullDown, #pullUp {

    background:#fff;

    height:40px;

    line-height:40px;

    padding:5px 10px;

    border-bottom:1px solid #ccc;

    font-weight:bold;

    font-size:14px;

    color:#888;

}

#pullDown .pullDownIcon, #pullUp .pullUpIcon  {

    display:block; float:left;

    width:40px; height:40px;

    background:url(public/pull-icon@2x.png) 0 0 no-repeat;

    -webkit-background-size:40px 80px;

    background-size:40px 80px;

    -webkit-transition-property:-webkit-transform;

    -webkit-transition-duration:250ms;

}

#pullDown .pullDownIcon {

    -webkit-transform:rotate(0deg) translateZ(0);

}

#pullUp .pullUpIcon  {

    -webkit-transform:rotate(-180deg) translateZ(0);

}

#pullDown.flip .pullDownIcon {

    -webkit-transform:rotate(-180deg) translateZ(0);

}

#pullUp.flip .pullUpIcon {

    -webkit-transform:rotate(0deg) translateZ(0);

}

#pullDown.loading .pullDownIcon, #pullUp.loading .pullUpIcon {

    background-position:0 100%;

    -webkit-transform:rotate(0deg) translateZ(0);

    -webkit-transition-duration:0ms;

    

    -webkit-animation-name:loading;

    -webkit-animation-duration:2s;

    -webkit-animation-iteration-count:infinite;

    -webkit-animation-timing-function:linear;

}

@-webkit-keyframes loading {

    from { -webkit-transform:rotate(0deg) translateZ(0); }

    to { -webkit-transform:rotate(360deg) translateZ(0); }

}

</style>

</head>

<body>

    <div class="top">

		页面导航

	</div>

	<div id="wrapper">

		<div id="scroller">

			<div id="pullDown">

				<span class="pullDownIcon"></span><span class="pullDownLabel">下拉刷新...</span>

			</div>

			<div class="news-lists" id="news-lists">

				<div class="item">根据市场奖惩制度，结合市场各部门提供的数据</div>

				<div class="item">根据市场奖惩制度，结合市场各部门提供的数据</div>

				<div class="item">根据市场奖惩制度，结合市场各部门提供的数据</div>

				<div class="item">根据市场奖惩制度，结合市场各部门提供的数据</div>

				<div class="item">根据市场奖惩制度，结合市场各部门提供的数据</div>

				<div class="item">根据市场奖惩制度，结合市场各部门提供的数据</div>

				<div class="item">根据市场奖惩制度，结合市场各部门提供的数据</div>

				<div class="item">根据市场奖惩制度，结合市场各部门提供的数据</div>

				<div class="item">根据市场奖惩制度，结合市场各部门提供的数据</div>

				<div class="item">根据市场奖惩制度，结合市场各部门提供的数据</div>

				<div class="item">根据市场奖惩制度，结合市场各部门提供的数据</div>

				<div class="item">根据市场奖惩制度，结合市场各部门提供的数据</div>

				<div class="item">根据市场奖惩制度，结合市场各部门提供的数据</div>

				<div class="item">根据市场奖惩制度，结合市场各部门提供的数据</div>

				<div class="item">根据市场奖惩制度，结合市场各部门提供的数据</div>

			</div>

			<div id="pullUp">

				<span class="pullUpIcon"></span><span class="pullUpLabel">上拉加载更多...</span>

			</div>

		</div>

	</div>

	<div class="footer">

		底部导航

	</div>

</body>

</html>

<script type="text/javascript" src="public/zepto.js"></script>

<script type="text/javascript" src="public/iscroll.js"></script>

<script type="text/javascript">

    var data,

		myScroll,

		pullDownEl, pullDownOffset,

		pullUpEl, pullUpOffset,

		generatedCount = 0;

	function pullDownAction () {

		$.getJSON('public/test.json', function (data, state) {

			if (data && data.state == 1 && state == 'success') {

				//本地测试，为了看到加载中效果故加上定时器

				setTimeout(function () {

					$('#news-lists').before(data.data);

					myScroll.refresh();

				}, 600);

			}

		});

	}

	function pullUpAction () {

		$.getJSON('public/test.json', function (data, state) {

			if (data && data.state == 1 && state == 'success') {

				//本地测试，为了看到加载中效果故加上定时器

				setTimeout(function () {

					$('#news-lists').append(data.data);

					myScroll.refresh();

				}, 600);

			}

		});

	}

	//去除浏览器默认事件

	document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

	//domready后绑定初始化事件

	document.addEventListener('DOMContentLoaded', loaded, false);

	function loaded() {

		pullDownEl = document.getElementById('pullDown');

		pullDownOffset = pullDownEl.offsetHeight;

		pullUpEl = document.getElementById('pullUp');

		pullUpOffset = pullUpEl.offsetHeight;

		/**

		 * 初始化iScroll控件

		 */

		myScroll = new iScroll('wrapper', {

			vScrollbar : false,

			topOffset : pullDownOffset,

			onRefresh : function () {

				if (pullDownEl.className.match('loading')) {

					pullDownEl.className = '';

					pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新...';

				} else if (pullUpEl.className.match('loading')) {

					pullUpEl.className = '';

					pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加载更多...';

				}

			},

			onScrollMove: function () {

				if (this.y > 5 && !pullDownEl.className.match('flip')) {

					pullDownEl.className = 'flip';

					pullDownEl.querySelector('.pullDownLabel').innerHTML = '松手开始更新...';

					this.minScrollY = 0;

				} else if (this.y < (this.maxScrollY - 5) && !pullUpEl.className.match('flip')) {

					pullUpEl.className = 'flip';

					pullUpEl.querySelector('.pullUpLabel').innerHTML = '松手开始更新...';

				}

			},

			onScrollEnd: function () {

				if (pullDownEl.className.match('flip')) {

					pullDownEl.className = 'loading';

					pullDownEl.querySelector('.pullDownLabel').innerHTML = '加载中...';

					pullDownAction();

				} else if (pullUpEl.className.match('flip')) {

					pullUpEl.className = 'loading';

					pullUpEl.querySelector('.pullUpLabel').innerHTML = '加载中...';

					pullUpAction();

				}

			}

		});

	}

</script>

需要用移动端浏览器或google的debug模拟移动端浏览器

效果演示    源码下载

转自：http://my.oschina.net/felumanman/blog/478013

zepto.js + iscroll.js上拉加载 下拉加载的 移动端 新闻列表页面的更多相关文章

  1. iscroll.js实现上拉刷新，下拉加载更多，应用技巧项目实战

    上拉刷新,下拉加载更多...仿原生的效果----iscroll是一款做滚动效果的插件,具体介绍我就不废话,看官方文档,我只写下我项目开发的一些用到的用法: (如果不好使,调试你的css,想必是个很蛋疼 ...

  2. 微信小程序上拉加载下拉刷新

    微信小程序实现上拉加载下拉刷新 使用小程序默认提供方法. (1). 在xxx.json 中开启下拉刷新,需要设置backgroundColor,或者是backgroundTextStyle ,因为加载 ...

  3. Vue mint ui用在消息页面上拉加载下拉刷新loadmore 标记

    之前总结过一个页面存在多个下拉加载的处理方式,今天再来说一下在消息页面的上拉加载和下拉刷新,基本上每个app都会有消息页面,会遇到这个需求 需求:每次加载十条数据,上拉加载下拉刷新,并且没有点击查看过 ...

  4. PullToRefreshGridView上拉刷新，下拉加载

    PullToRefreshGridView上拉刷新,下拉加载 布局: <?xml version="1.0" encoding="utf-8"?> ...

  5. vux （scroller）上拉刷新、下拉加载更多

    1)比较关键的地方是要在 scroller 组件上里加一个 ref 属性 <scroller :lockX=true height="-170" :pulldown-conf ...

  6. iOS--MJRefresh的使用 上拉刷新和下拉加载

    1.一般使用MJRefresh 来实现上拉刷新和下拉加载功能 2.MJRefresh 下载地址:https://github.com/CoderMJLee/MJRefresh 3. MJRefresh ...

  7. 上拉加载下拉刷新控件WaterRefreshLoadMoreView

    上拉加载下拉刷新控件WaterRefreshLoadMoreView 效果: 源码: // // SRSlimeView // @author SR // Modified by JunHan on ...

  8. RecyclerView 上拉加载下拉刷新

    RecyclerView 上拉加载下拉刷新 <android.support.v4.widget.SwipeRefreshLayout android:id="@+id/teach_s ...

  9. APICloud上啦加载下拉刷新模块

    apicloud有自带的上啦加载下拉刷新,当让也可以用第三方或者在模块库里面找一个使用 一.下拉刷新,一下代码写在 apiready = function (){} 里面 apiready = fun ...

随机推荐

  1. 第十一篇 SQL Server安全审核

    本篇文章是SQL Server安全系列的第十一篇,详细内容请参考原文. SQL Server审核SQL Server审核是指你可以在数据库或服务器实例监控事件.审核日志包含你选择捕获的事件的列表,在服 ...

  2. HTMLCanvasElement.toDataURL()

    HTMLCanvasElement.toDataURL() 方法返回一个包含图片展示的 data URI .可以使用 type 参数其类型,默认为 PNG 格式.图片的分辨率为96dpi. 如果画布的 ...

  3. Java IO 写文件

    package com.lf.fileproject; import java.io.File; import java.io.FileOutputStream; import org.junit.T ...

  4. iOS UITableView的分割线短15像素，移动到最左边的方法(iOS8)

    有好几个朋友问我ios 分割线端了一些 如何解决,于是我就写一篇博客吧.为什么我说是少了15像素呢?首先我们拖拽一个默认的tableview 控件! 看下xcode5 面板的inspector(检查器 ...

  5. WPF 基础面试题及答案（一）

    一 · WPF由哪两部分组成? wpf 由两个主要部分 组成:引擎和编程框架. 1 引擎.wpf引擎是基于窗体的应用程序 图形 视频 音频和文档提供了一个单一的运行时库.重要的是WPF基于矢量的呈现引 ...

  6. 正确导入android-support-v4.jar的方法

    在导入使用了ViewPage,ActionBar,Fragment的工程后出现错误,很有可能是没有导入4.0版本的支持包. 首先在Project->properties->Java Bui ...

  7. Java基础之创建窗口——使用网格布局管理器（TryGridLayout）

    控制台程序. 网格布局管理器可以在容器的矩形网格中布局组件. import javax.swing.*; import java.awt.*; import javax.swing.border.Et ...

  8. tomcat war包部署

    平常的开发我们都是通过IDE进行项目的部署,但有时候我们不得不进行手工部署(例如在Server上). 手工部署分为以下几步: 第1步: 用maven打war包 (假如得到的war包名为: appkit ...

  9. dlopen、dlsym和dlclose的使用

    在dlopen()函数以指定模式打开指定的动态链接库文件,并返回一个句柄给dlsym()的调用进程.使用dlclose()来卸载打开的库. dlopen: dlopen() The function ...

  10. for循环、for循环嵌套

    循环:反复执行某段代码. 循环四要素:初始条件,循环条件,循环体,状态改变. 循环的最后一句:循环条件不再满足. 1.找出100以内与7有关的数并打印:(1).从1找到100(2).找出与7有关的数 ...