分享一个discuz touch端的jQuery下拉刷新组件

在线Demo

最近装了个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;
}

  

posted @   Fast Mover  阅读(843)  评论(1编辑  收藏  举报
编辑推荐:
· 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,谁才是开发者新宠?
友情链接: A4纸尺寸 | 卡通头像 | +申请友情链接
点击右上角即可分享
微信分享提示