下拉刷新上拉加载插件

xiaoxiao2021-02-28 82

源码： ;(function($,window,undefined){ function ScrollUpLoad() { //返回此对象 return new ScrollUpLoad.prototype.init(); } ScrollUpLoad.prototype = { init: function() { this.distance = 0; //加载按钮的距离底部距离 this.touchPosition = {}; //手势坐标信息集合 //初始化执行函数 this.touchStart(); this.touchMove(); this.touchEnd(); return this; }, touchStart: function(){ //获取初始坐标点 var _this = this; $(window).on('touchstart',function(e){ _this.touchPosition.startY = e.changedTouches[0].pageY; }) }, touchMove: function() { var _this = this; //手指移动事件 $(window).on('touchmove',function(e){ //获取滚动高度、设备高度、文档高度的数据 var scrollTop = $(window).scrollTop(), serviceHei = $(window).height(), documenHei = $(document).height(); //处理上拉加载 if(scrollTop + serviceHei >= documenHei){ //调取方向判断处理不同逻辑 _this.direction(e,function(){ _this.distanceRed('bottom'); },function(){ _this.distanceAdd('bottom'); }) }else if(scrollTop == 0){ //下拉刷新 //调取方向判断处理不同逻辑 _this.direction(e,function(){ _this.distanceAdd('top'); },function(){ _this.distanceRed('top'); }) }else{ _this.setHtmlCss('auto'); } }); }, touchEnd:function(){ var that = this; $(window).on('touchend',function(){ var scrollTop = $(window).scrollTop(); if($('.load').hasClass('top')){ if(scrollTop != 0){ console.log('上拉加载！') $('.load').attr("style","bottom:40px"); }else{ console.log('下拉刷新！') $('.load').attr("style","top:60px"); } }else{ console.log('不加载了') //重置 if(scrollTop != 0){ $('.load').removeClass('top').addClass('bottom down').attr("style","bottom:-0.46rem"); }else{ $('.load').removeClass('top').addClass('bottom down').attr("style","top:-30px;"); } } that.setHtmlCss('auto'); that.distance = 0; }); }, direction: function(e,upFun,downFun) { //判断手势方向 var _this = this, touchInfor = _this.touchPosition; touchInfor.endY = e.changedTouches[0].pageY; touchInfor.distanceY = touchInfor.endY - touchInfor.startY; _this.setHtmlCss('hidden'); if(touchInfor.distanceY<0){ //上滑操作 if(upFun && typeof upFun === 'function'){ upFun() } } else if(touchInfor.distanceY>0){ //下滑操作 if(downFun && typeof downFun === 'function'){ downFun() } } //重置起点X坐标 _this.touchPosition.startY = e.changedTouches[0].pageY; }, distanceAdd: function(direction) { //按钮控制下移 var _this = this; if(_this.distance == 0){ _this.distance = -30; } $('.load').removeClass('down top').addClass('bottom').css(direction,_this.distance --); }, distanceRed: function(direction) { //按钮控制上移 var _this = this; $('.load').addClass('top').removeClass('bottom down').css(direction,_this.distance++) }, setHtmlCss: function(flag) { $('html').css('overflow-y',flag) } } ScrollUpLoad.prototype.init.prototype = ScrollUpLoad.prototype; if(!window.ScrollUpLoad){ window.ScrollUpLoad = ScrollUpLoad; } })($,window,undefined); HTML： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title></title> </head> <body>  <p class="load"></p> </body> </html> css： .load{position: fixed;left: 50%;bottom: -0.46rem;margin-left: -0.22rem;width: 0.44rem;height: 0.44rem;background:#fff url(../i/shua.png) no-repeat center;background-size:100% 100%;border-radius: 0.44rem;box-shadow: 0 0 0.08rem #ededed;opacity: 0.26;} .load.top{animation: roat .36s linear infinite;opacity: 1;-webkit-transition:opacity 1s ease 0s;} .load.bottom{animation: roatNi .4s linear infinite;opacity: 0.26;-webkit-transition:opacity 0.8s ease 0s;} .load.down{-webkit-transition:all 0.8s ease 0s;} @-webkit-keyframes roat{0%{-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0);}100%{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}} @-webkit-keyframes roatNi{100%{-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0)}0%{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}} 调用： ScrollUpLoad()

转载请注明原文地址: https://www.6miu.com/read-1900006.html

技术

最新回复(0)