zepto.js + iscroll.js上拉加载 下拉加载的 移动端 新闻列表页面
2016-06-17 11:24
453 查看
<!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
相关文章推荐
- Android TransitionDrawable ImageView过度效果使用实例
- Intent和IntentFilter详解
- Android更新app的版本
- 【shadertoy】海洋球 -- unity中的水面特效shader
- Java Android SSL 双向认证代码
- 腾讯云IM浅谈
- 微信支付出错 Fatal error: Uncaught exception ‘WxPayException‘ with message ‘curl出错,错误码:60‘ in ....解决办法
- Android实现透明的颜色效果
- unity 加载
- AndroidManifest.xml文件详解(supports-gl-texture)
- 关于运行时的方法使用:objc_setAssociatedObject
- Android知识点博客集1
- Android Application类详解
- 初学swift
- android studio改变配色方案
- Android 注解的使用与注意事项
- Android 控件布局常用属性
- 实现Android apk 版本号自动生成和打包批量重命名功能
- 你足够了解Context吗?
- 深入讲解Android中Activity launchMode