H5基于iScroll实现下拉刷新和上拉加载更多
程序员文章站
2022-05-26 08:27:12
前言
前一段有个手机端的项目需要用到下拉刷新和上拉加载更多的效果,脑海里第一反映就是微博那种效果,刚开始的理...
前言
前一段有个手机端的项目需要用到下拉刷新和上拉加载更多的效果,脑海里第一反映就是微博那种效果,刚开始的理解有些偏差,以为下拉也是追加数据,上拉也是追加数据,后请教同事后发现其实下拉只是刷新最新数据而已,上拉是追加数据。
使用技巧
1、引用iscroll.js, 在初始化时添加两个事件监听:touchmove、domcontentloaded。
2、实现iscroll插件的onscrollend事件, 也就是在这个事件里调用你自己的ajax方法实现数据的刷新和追加。
3、上拉加载更多请求后台时就相当于分页请求数据,这时候需要在ajax请求时发送pageindex参数,而初始化加载时需要从后台返回一个pagecount以便前台判断。
4、最关键的就是实现下拉刷新方法(pulldownaction)和上拉加载更多(pullupaction)方法。
效果图
实现方法
var myscroll, pulldownel, pulldownoffset, pullupel, pullupoffset, generatedcount = 0; /** * 下拉刷新 (自定义实现此方法) * myscroll.refresh(); 数据加载完成后,调用界面更新方法 */ function pulldownaction () { settimeout(function () { var el, li, i; el = document.getelementbyid('thelist'); for (i=0; i<3; i++) { li = document.createelement('li'); li.innertext = 'generated row ' + (++generatedcount); el.insertbefore(li, el.childnodes[0]); } myscroll.refresh(); //数据加载完成后,调用界面更新方法 }, 1000); } /** * 滚动翻页 (自定义实现此方法) * myscroll.refresh(); // 数据加载完成后,调用界面更新方法 */ function pullupaction () { settimeout(function () { // <-- simulate network congestion, remove settimeout from production! var el, li, i; el = document.getelementbyid('thelist'); for (i=0; i<3; i++) { li = document.createelement('li'); li.innertext = 'generated row ' + (++generatedcount); el.appendchild(li, el.childnodes[0]); } myscroll.refresh(); //数据加载完成后,调用界面更新方法 }, 1000); } /** * 初始化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(); // ajax call } else if (pullupel.classname.match('flip')) { pullupel.classname = 'loading'; pullupel.queryselector('.pulluplabel').innerhtml = '加载中...'; pullupaction(); // 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);
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: js实现移动端导航点击自动滑动效果