hml5 自定义滑动控件

2024-11-15 技术教程

ys_scroll.css

.ys-scroll-wrapper{position:relative;overflow:auto;-webkit-overflow-scrolling:touch;}.ys-scroll-wrapper.ys-scroll-content{min-height:100%;}/*loading-top*/.ys-scroll-wrapper.loading-top{display:block;width:100%;height:40px;line-height:40px;text-align:center;}/*loading-bottom*/.ys-scroll-wrapper.loading-bottom{display:block;width:100%;height:40px;line-height:40px;text-align:center;}/*loading-bottom*/.ys-scroll-wrapper.loading-end{display:none;width:100%;height:40px;line-height:40px;text-align:center;}

ys_scroll.js

(function($){vardefaultSettings={hasArrivedEnd:false,//是否已经到底部pulldownCallback:function(){//下拉回调console.log("pulldown...");},pullupCallback:function(){//上拉回调console.log("pullup...");}};functionrender(target,settings){varcontainer=target;varchildrenNode=$(container).children().remove();$(container).addClass("ys-scroll-wrapper");$(container).append("<divclass='loading-top'>加载中...</div>");$(container).append("<divclass='ys-scroll-content'></div>");$(container).append("<divclass='loading-bottom'>加载更多...</div>");$(container).append("<divclass='loading-end'>已经到底了</div>");$(container).find(".ys-scroll-content").append(childrenNode);$(container).scrollTop(LOADING_BAR_HEIGHT);$(container).data("settings",settings);returncontainer;}functionbindEventHandlers(target,container,settings){varloadingTopRevertTimeout=null;varloadingTopEndTimeout=null;varloadingBottomRevertTimeout=null;varloadingBottomTimeout=null;varpulldownCallback=settings.pulldownCallback;varpullupCallback=settings.pullupCallback;functionclearTimeouts(){clearTimeout(loadingTopRevertTimeout);clearTimeout(loadingTopEndTimeout);clearTimeout(loadingBottomRevertTimeout);clearTimeout(loadingBottomTimeout);}functionscrollHandler(){clearTimeouts();varloadingTop=false;if(arriveLoadingTopStart(container)){loadingTopRevertTimeout=setTimeout(function(){loadingTopRevert(container);},RESPONSE_DELAY);loadingTop=true;}if(arriveLoadingTopEnd(container)){clearTimeouts();loadingTopEndTimeout=setTimeout(function(){resetLoading(container);pulldownCallback();},RESPONSE_DELAY);loadingTop=true;}varhasArrivedEnd=$(container).data("settings").hasArrivedEnd;if(hasArrivedEnd||loadingTop){//如果已经到底了不需要额外操作return;}if(arriveLoadingBottomStart(container)){loadingBottomRevertTimeout=setTimeout(function(){loadingBottomRevert(container);},RESPONSE_DELAY);}if(arriveLoadingBottomEnd(container)){clearTimeouts();loadingBottomTimeout=setTimeout(function(){pullupCallback();},RESPONSE_DELAY)}}varhasPressed=false;$(container).on("touchstart",function(event){hasPressed=true;clearTimeouts();stopAnimation(container);});$(container).on("touchmove",function(event){hasPressed=true;clearTimeouts();stopAnimation(container);varclientX=event.originalEvent.changedTouches[0].clientX;varclientY=event.originalEvent.changedTouches[0].clientY;if(clientY<0||clientX<0){scrollHandler();}});$(container).on("touchendtouchcancel",function(event){scrollHandler();hasPressed=false;});$(container).scroll(function(){if(hasPressed||reverting){return;}scrollHandler();});}varRESPONSE_DELAY=800;//触发延迟varANIMATION_DURATION=300;//动画持续时间varLOADING_BAR_HEIGHT=40;//loadingbar高度varreverting=false;//动画正在恢复functionstopAnimation(container){$(container).stop(true);reverting=false;}functionloadingTopRevert(container){reverting=true;$(container).animate({"scrollTop":LOADING_BAR_HEIGHT+"px"},ANIMATION_DURATION,function(){reverting=false;});}/*判断达到Loading-top开始处*/functionarriveLoadingTopStart(container){varscrollTop=$(container).scrollTop();if(scrollTop<LOADING_BAR_HEIGHT){returntrue;}returnfalse;}/*判断达到Loading-top结束处*/functionarriveLoadingTopEnd(container){varscrollTop=$(container).scrollTop();if(scrollTop<1){returntrue;}returnfalse;}functionloadingBottomRevert(container){reverting=true;varclientHeight=$(container).height();varscrollTop=$(container)[0].scrollHeight-LOADING_BAR_HEIGHT-clientHeight;$(container).animate({"scrollTop":scrollTop+"px"},ANIMATION_DURATION,function(){reverting=false;});}/*判断到达LoadingBottom开始处*/functionarriveLoadingBottomStart(container){varscrollTop=$(container).scrollTop();varscrollHeight=$(container)[0].scrollHeight;varclientHeight=$(container).height();if(scrollTop+clientHeight+LOADING_BAR_HEIGHT>=scrollHeight){returntrue;}returnfalse;}/*判断到达LoadingBottom结束处*/functionarriveLoadingBottomEnd(container){varscrollTop=$(container).scrollTop();varscrollHeight=$(container)[0].scrollHeight;varclientHeight=$(container).height();if(scrollTop+clientHeight+1>scrollHeight){returntrue;}returnfalse;}/*重设loading*/functionresetLoading(container){$(container).data("settings").hasArrivedEnd=false;$(container).find(".loading-bottom").show();$(container).find(".loading-end").hide();}/*设置loadingend*/functionsetLoadingEnd(container){$(container).data("settings").hasArrivedEnd=true;$(container).find(".loading-bottom").hide();$(container).find(".loading-end").show();}varoptions={ysScroll:function(settings){varmergedSettings={};$.extend(mergedSettings,defaultSettings,settings);$(this).each(function(){varcontainer=render(this,settings);$(container).data("settings",settings);bindEventHandlers(this,container,mergedSettings);});},ysScrollRefresh:function(){if(arriveLoadingTopStart(this)){loadingTopRevert(this);}if(arriveLoadingBottomStart(this)){loadingBottomRevert(this);}},ysScrollLoadEnd:function(){setLoadingEnd(this);}};$.fn.extend(options);})(jQuery);

测试页面 scroll.html

<!DOCTYPEhtml><htmlclass="no-js"><head><metacharset="utf-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge,chrome=1"><title></title><metaname="description"content=""><metaname="viewport"content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"><metaname="format-detection"content="telephone=no"><linkhref="css/common/ys_scroll.css"rel="stylesheet"><style>html,body,.container{height:100%;margin:0;padding:0;}</style></head><body><divclass="container"><ul><li>这是测试数据...</li><li>这是测试数据...</li><li>这是测试数据...</li><li>这是测试数据...</li><li>这是测试数据...</li><li>这是测试数据...</li><li>这是测试数据...</li><li>这是测试数据...</li><li>这是测试数据...</li><li>这是测试数据...</li><li>这是测试数据...</li><li>这是测试数据...</li><li>这是测试数据...</li><li>这是测试数据...</li><li>这是测试数据...</li><li>这是测试数据...</li><li>这是测试数据...</li><li>这是测试数据...</li><li>这是测试数据...</li><li>这是测试数据...</li><li>这是测试数据...</li><li>这是测试数据...</li></ul></div><scriptsrc="dist/js/jquery-1.11.3.min.js"></script><scriptsrc="js/common/ys_scroll.js"></script><script>vardataHtml=$(".containerul").html();$(".container").ysScroll({pulldownCallback:function(){//下拉回调console.log("pulldown...");$(".containerul").html(dataHtml);$(".container").ysScrollRefresh();},pullupCallback:function(){//上拉回调console.log("pullup...");$(".containerul").append(dataHtml);$(".container").ysScrollRefresh();}});</script></body></html>

注:容器使用前要给其设置一个固定的高度。当触发pulldownCallback,pullupCallback回调后一定要使用$(".container").ysScrollRefresh();重置容器。

声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。

微信客服