分享一个discuz touch端的jQuery下拉刷新组件
最近装了个discuz论坛, 趣股VIP吧,发现里面内置的jQuery上拉刷新组件写得还行,STATICURL可以用'http://o9gzet7tk.bkt.clouddn.com/img/',不多说直接上代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 | var pullrefresh = { init : function () { var pos = {}; var status = false ; var divobj = null ; var contentobj = null ; var reloadflag = false ; $( 'body' ).on( 'touchstart' , function (e) { e = mygetnativeevent(e); pos.startx = e.touches[0].pageX; pos.starty = e.touches[0].pageY; }) .on( 'touchmove' , function (e) { e = mygetnativeevent(e); pos.curposx = e.touches[0].pageX; pos.curposy = e.touches[0].pageY; if (pos.curposy - pos.starty < 0 && !status) { return ; } if (!status && $(window).scrollTop() <= 0) { status = true ; divobj = document.createElement( 'div' ); divobj = $(divobj); divobj.css({ 'position' : 'relative' , 'margin-left' : '-85px' }); $( 'body' ).prepend(divobj); contentobj = document.createElement( 'div' ); contentobj = $(contentobj); contentobj.css({ 'position' : 'absolute' , 'height' : '30px' , 'top' : '-30px' , 'left' : '50%' }); contentobj.html( '<img src="' + STATICURL + 'icon_arrow.gif" style="vertical-align:middle;margin-right:5px;-moz-transform:rotate(180deg);-webkit-transform:rotate(180deg);-o-transform:rotate(180deg);transform:rotate(180deg);"><span id="refreshtxt">下拉可以刷新</span>' ); contentobj.find( 'img' ).css({ '-webkit-transition' : 'all 0.5s ease-in-out' }); divobj.prepend(contentobj); pos.topx = pos.curposx; pos.topy = pos.curposy; } if (!status) { return ; } if (status == true ) { var pullheight = pos.curposy - pos.topy; if (pullheight >= 0 && pullheight < 150) { divobj.css({ 'height' : pullheight/2 + 'px' }); contentobj.css({ 'top' : (-30 + pullheight/2) + 'px' }); if (reloadflag) { contentobj.find( 'img' ).css({ '-webkit-transform' : 'rotate(180deg)' , '-moz-transform' : 'rotate(180deg)' , '-o-transform' : 'rotate(180deg)' , 'transform' : 'rotate(180deg)' }); contentobj.find( '#refreshtxt' ).html( '下拉可以刷新' ); } reloadflag = false ; } else if (pullheight >= 150) { divobj.css({ 'height' :pullheight/2 + 'px' }); contentobj.css({ 'top' : (-30 + pullheight/2) + 'px' }); if (!reloadflag) { contentobj.find( 'img' ).css({ '-webkit-transform' : 'rotate(360deg)' , '-moz-transform' : 'rotate(360deg)' , '-o-transform' : 'rotate(360deg)' , 'transform' : 'rotate(360deg)' }); contentobj.find( '#refreshtxt' ).html( '松开可以刷新' ); } reloadflag = true ; } } e.preventDefault(); }) .on( 'touchend' , function (e) { if (status == true ) { if (reloadflag) { contentobj.html( '<img src="' + STATICURL + 'icon_load.gif" style="vertical-align:middle;margin-right:5px;">正在加载...' ); contentobj.animate({ 'top' : (-30 + 75) + 'px' }, 618, 'linear' ); divobj.animate({ 'height' : '75px' }, 618, 'linear' , function () { window.location.reload(); }); return ; } } if (divobj != null ) // fixed bugs by Nelson 20160818 { divobj.remove(); } divobj = null ; status = false ; pos = {}; }); } }; function mygetnativeevent(event) { while (event && typeof event.originalEvent !== "undefined" ) { event = event.originalEvent; } return event; } |
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· 展开说说关于C#中ORM框架的用法!
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?