辽宁省建设厅科技中心网站,主流网站 技术,湖南企业建网站公司,建设跨境网站Updownload.js 基于iSroll 5.0实现的上拉加载和下拉刷新插件 移动端效果比较好#xff0c;开发者工具打开后#xff0c;需要刷新下页面。 [演示地址:] https://chenyk2016.github.io/upDownLoad/demo.html [github地址:] https://github.com/chenyk2016/upDownLoad/ 效果图 1…Updownload.js 基于iSroll 5.0实现的上拉加载和下拉刷新插件 移动端效果比较好开发者工具打开后需要刷新下页面。 [演示地址:] https://chenyk2016.github.io/upDownLoad/demo.html [github地址:] https://github.com/chenyk2016/upDownLoad/ 效果图 1.建立html !DOCTYPE html
html
headmeta charsetutf-8meta nameviewport contentinitial-scale1.0, maximum-scale1.0, user-scalableno /title下拉刷新上拉加载/title
/head
body
h2IScroll上拉加载下拉刷新/h2
div classiscroll_wrap idiscroll_wrapdiv classiscroll!-- 方案列表 --div classtask_wrap Pdas/PPdas/PPdas/PPdas/PPdas/PPdas/PPdas/PPdas/PPdas/PPdas/P/div/div
/div
/body
/html 两个容器iscroll_wrap和iscroll iscroll为滚动元素iscroll_wrap为固定大小的容器。 可以在iscroll里新建列表等 2.样式和图片 style typetext/css*{ padding: 0;margin: 0; }h2{ text-align: center; border-bottom: 1px solid #ccc; height: 40px; background-color: #eee; }.iscroll_wrap { position: absolute; top: 40px; bottom: 0; width: 100%; background-color: #ccc; overflow: hidden; }/* min-height: 101%; 是避免内容高度小于.iscroll_wrap 的高度时无法使用iScroll*/.iscroll { position: absolute; top: 0; left: 0; width: 100%; min-height: 101%; background-color: #fff; }.iscroll .loading { background: url(./img/loading.gif) no-repeat left center; padding-left: 30px; }
/style 注 iscroll的min-height: 101%; 是避免内容高度小于.iscroll_wrap的高度时无法使用iScroll 3.引入js文件 script srciscroll-probe.js/script // 引入iScroll插件
script src./js/updownload.js/script // 扩展的源码
script typetext/javascript// 1.创建实例var myRefresh new UpDownLoad( #iscroll_wrap );// 2.绑定事件 myRefresh.on(pullDown, function (d) {// 下拉事件触发行为myRefresh.success(function (d) {// 刷新成功后执行});myRefresh.error(function (d) {// 刷新失败后执行});}).on(pullUp,function (d) {// 上拉事件触发行为myRefresh.success(function (d) {// 上拉成功后执行 });myRefresh.error(function (d) {// 上拉失败后执行});});/script 注意 上拉和下拉都有两个状态。为了显示成功状态之前执行刷新DOM需要将操作DOM的行为放在回调里执行。 myRefresh.success(fn); myRefresh.error(fn); 如果想看具体实现可以查看代码源文件updownload.js 完整演示 !DOCTYPE html
html
headmeta charsetutf-8meta nameviewport contentinitial-scale1.0, maximum-scale1.0, user-scalableno /title下拉刷新上拉加载/titlestyle typetext/css
*{ padding: 0;margin: 0; }
h2{ text-align: center; border-bottom: 1px solid #ccc; height: 40px; background-color: #eee; }
.iscroll_wrap { position: absolute; top: 40px; bottom: 0; width: 100%; background-color: #ccc; overflow: hidden; }
/* min-height: 101%; 是避免内容高度小于.iscroll_wrap 的高度时无法使用iScroll*/
.iscroll { position: absolute; top: 0; left: 0; width: 100%; min-height: 101%; background-color: #fff; }
.iscroll .loading { background: url(./img/loading.gif) no-repeat left center; padding-left: 30px; }/style
/head
body
h2IScroll上拉加载下拉刷新/h2
div classiscroll_wrap idiscroll_wrapdiv classiscroll!-- 方案列表 --div classtask_wrap Pdas/PPdas/PPdas/PPdas/PPdas/PPdas/PPdas/PPdas/PPdas/PPdas/P/div/div
/div/body
script srciscroll-probe.js/script
script src./js/updownload.js/script
script typetext/javascript// 使用window.onload function () {var myRefresh new UpDownLoad( #iscroll_wrap );myRefresh.on(pullDown, function (d) {console.log(pullDown);// 延时器模拟正在加载效果var taskWrap document.querySelector(.task_wrap);taskWrap.innerHTML ;setTimeout(function (res) {// 刷新成功后执行myRefresh.success(function (d) {var taskWrap document.querySelector(.task_wrap);taskWrap.innerHTML p刷新as/ppa刷新s/pp刷新as/ppas/ppas/ppas/ppas/ppas/ppas/ppas/p;});// 刷新失败后执行// myRefresh.error();}, 1000);} ).on(pullUp, function (d) {console.log(pullUp);setTimeout(function (res) {// 加载成功后执行myRefresh.success(function () {var taskWrap document.querySelector(.task_wrap);var dom document.createElement(div);dom.innerHTML p加载/pp加载/pp加载/pp加载/pp加载/pp加载/ppas/ppas/ppas/ppas/ppas/ppas/p;taskWrap.appendChild(dom);});// 加载失败后执行// myRefresh.error();}, 1000);});};
/script
/html 关注我 github [https://github.com/chenyk2016] 博客园 [https://home.cnblogs.com/u/chenykblog/] 转载于:https://www.cnblogs.com/chenykblog/p/7750067.html
