iscroll上拉加载、下拉刷新

为什么80%的码农都做不了架构师？>>>

<!DOCTYPE html>
<html>
<head lang = "en"><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black"><meta name="format-detection" content="telephone=no"><title>关 于</title><link type="text/css" rel="stylesheet" href="../../style/public.css"><link type="text/css" rel="stylesheet" href="../../style/style.css">
</head>
<body>
<div id="wrapper"><div id="scroller"><div id="pullDown"><span class="pullDownIcon"></span><span class="pullDownLabel">下拉刷新...</span></div><ul id="thelist"><li><img src="img/page1_img1.jpg" /></li><li><img src="img/page1_img2.jpg" /></li><li><img src="img/page1_img3.jpg" /></li><li><img src="img/page1_img1.jpg" /></li><li><img src="img/page1_img2.jpg" /></li><li><img src="img/page1_img3.jpg" /></li></ul><div id="pullUp"><span class="pullUpIcon"></span><span class="pullUpLabel">上拉加载更多...</span></div></div></div><script src="iscroll.js"></script><script>/*** 下拉刷新 （自定义实现此方法）* myScroll.refresh(); // 数据加载完成后，调用界面更新方法*/function pullDownAction() {setTimeout(function () {var el, li, i;el = document.getElementById('thelist');//==========================================li = document.createElement('li');// li.innerText = 'Generated row ' + (++generatedCount);li.innerHTML = '<img src="' + 'http://pic.sogou.com/style2013/images/loading.gif' + '"/>';el.insertBefore(li, el.childNodes[0]);/*$.ajax({type: "GET",url: "LoadMore.ashx",data: { page: generatedCount },dataType: "json",success: function (data) {var json = data;$(json).each(function () {li = document.createElement('li');// li.innerText = 'Generated row ' + (++generatedCount);li.innerHTML = '<img src="' + this.src + '"/>';el.insertBefore(li, el.childNodes[0]);})}});*/myScroll.refresh(); //数据加载完成后，调用界面更新方法  Remember to refresh when contents are loaded (ie: on ajax completion)}, 3000);  // <-- Simulate network congestion, remove setTimeout from production!}function pullUpAction() {setTimeout(function () {var el, li, i;el = document.getElementById('thelist');//==========================================li = document.createElement('li');// li.innerText = 'Generated row ' + (++generatedCount);li.innerHTML = '<img src="' + 'http://pic.sogou.com/style2013/images/icon!.gif' + '"/>';el.insertBefore(li, el.childNodes[0]);//============================================myScroll.refresh(); // 数据加载完成后，调用界面更新方法 Remember to refresh when contents are loaded (ie: on ajax completion)}, 1000); // <-- Simulate network congestion, remove setTimeout from production!}/*** 初始化iScroll控件*/function loaded() {pullDownEl = document.getElementById('pullDown');pullDownOffset = pullDownEl.offsetHeight;pullUpEl = document.getElementById('pullUp');pullUpOffset = pullUpEl.offsetHeight;myScroll = new iScroll('wrapper', {scrollbarClass: 'myScrollbar', /* 重要样式 */useTransition: 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 < 5 && pullDownEl.className.match('flip')) {pullDownEl.className = '';pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新...';this.minScrollY = -pullDownOffset;} else if (this.y < (this.maxScrollY - 5) && !pullUpEl.className.match('flip')) {pullUpEl.className = 'flip';pullUpEl.querySelector('.pullUpLabel').innerHTML = '松手开始更新...';this.maxScrollY = this.maxScrollY;} else if (this.y > (this.maxScrollY + 5) && pullUpEl.className.match('flip')) {pullUpEl.className = '';pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加载更多...';this.maxScrollY = pullUpOffset;}},onScrollEnd: function () {if (pullDownEl.className.match('flip')) {pullDownEl.className = 'loading';pullDownEl.querySelector('.pullDownLabel').innerHTML = '加载中...';pullDownAction(); // Execute custom function (ajax call?)} else if (pullUpEl.className.match('flip')) {pullUpEl.className = 'loading';pullUpEl.querySelector('.pullUpLabel').innerHTML = '加载中...';pullUpAction(); // Execute custom function (ajax call?)}}});setTimeout(function () { document.getElementById('wrapper').style.left = '0'; }, 800);}//初始化绑定iScroll控件document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);document.addEventListener('DOMContentLoaded', loaded, false);
</script>
</body>
</html>

转载于:https://my.oschina.net/fuye/blog/370420

iscroll上拉加载、下拉刷新相关推荐

php微信小程序向下滑动,微信小程序功能实现：上滑加载下拉刷新
本篇文章给大家带来的内容是关于微信小程序功能实现:上滑加载下拉刷新,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 之前谈到文章列表的数据加载,是一次性全部加载,这样是不友好的.这章介 ...
ionic上拉加载-下拉刷新
ionic上拉加载-下拉刷新 1.上拉加载 <ion-infinite-scroll on-infinite="loadOlderStories()" distance=&q ...
Mint-ui中loadmore(上拉加载下拉刷新)组件在ios中滑动会触发点击事件的解决方法...
bug说明: Mint-ui中loadmore(上拉加载下拉刷新)组件在使用fastclick的情况下 ,在ios设备中滑动会触发点击事件: 解决方法: 我是按需引入,去项目中找到loadmore ...
php mescroll,mescroll.js上拉加载下拉刷新组件使用详解
本文实例为大家分享了上拉加载下拉刷新组件mescroll.js的具体代码,供大家参考,具体内容如下使用注意事项: 1.引入的时候出问题及时看官方给出的解决方案(基本上都必须看): 2.react中一 ...
教你如何使用SwipeRefreshLayout来构建一个上拉加载下拉刷新框架
前言: 基本上所以的移动端应用都有Listview(当然RecyclerView也一样),那必不可少的都会嵌入一个上拉加载下拉刷新的功能.这样能大大的减少用户的流量消耗,同样对于用户也有更好的用户体验 ...
ios 上拉加载下拉刷新
在一款 App应用中有的时候会用到上拉加载下拉刷新的功能,本人觉得SVPullToRefresh很好用(可以用在UIScrollView上,包括UITableview和UICollectionView ...
上拉加载下拉刷新了解下
2019独角兽企业重金招聘Python工程师标准>>> 老样子,我们先,哦不,今天我们直接上思路,没有效果图,真的没有我们依旧从界面及逻辑两块进行分析 1.界面上,只分成简单的两块 ...
vue 实现上拉加载下拉刷新（思路贼清晰）
项目需要用到上拉刷新下拉加载所以自己手动实现了一个组件: <template><div class="my-scroll" :class="[scr ...
h5结合vant框架，实现列表上拉加载下拉刷新
最近在做h5移动页面开发,并且需要用移动端android和ios将h5嵌进去.在开发过程中,使用了vant这个框架: vant文档:https://youzan.github.io/vant/#/zh ...
微信公众号上拉加载下拉刷新
最近再再做一个公众号的项目有需要用到上拉加载,下拉刷新的技术.在网上找了很久,终于找到一个很好用 js 插件,今天我就把这个插件分享给大家,该包可用于App和微信公众号 , 资源下载地址:https: ...

iscroll上拉加载、下拉刷新

iscroll上拉加载、下拉刷新相关推荐

最新文章

热门文章