pc端和移动端下拉刷新

在开发中有时候会有下拉刷新的需求,自己项目中有用到,把代码整理如下,其中移动端与pc端判断代码不在这里提供

if (app.isPhone || app.isAndroid) {
            console.log("移动端");
            //滑动处理
            var startX, startY;
            document.addEventListener('touchstart', function(ev) {
                startX = ev.touches[0].pageX;
                startY = ev.touches[0].pageY;
                //console.log(startX, startY);
            }, false);
            document.addEventListener('touchmove', function(ev) {
                clientX = ev.touches[0].pageX;
                clientY = ev.touches[0].pageY;
                //console.log(clientX, clientY);
                var direction = GetSlideDirection(startX, startY, clientX, clientY);
                switch (direction) {
                    case 0:
                        console.log("无操作");
                        break;
                    case 1:
                        // 向上
                        console.log("up");
                        break;
                    case 2:
                        // 向下
                        console.log("down");
                        console.log(clientY - startY);
                        if (clientY - startY > 0) {
                            //console.log(1);
                            if (clientY - startY >= 50) {
                                document.getElementById("jifenContent").style.marginTop = "50px";
                            } else {
                                document.getElementById("jifenContent").style.marginTop = (clientY - startY) + "px";
                            }
                            document.getElementById("loadingpic").style.display = "block";
                        }
                        break;

                    default:
                }
            }, false);
            document.addEventListener('touchend', function(ev) {
                var endX, endY;
                endX = ev.changedTouches[0].pageX;
                endY = ev.changedTouches[0].pageY;
                var direction = GetSlideDirection(startX, startY, endX, endY);
                switch (direction) {
                    case 0:
                        console.log("无操作");
                        break;
                    case 1:
                        // 向上
                        console.log("up");
                        break;
                    case 2:
                        // 向下
                        console.log("down");
                        location.reload();
                        break;

                    default:
                }
            }, false);

            function GetSlideDirection(startX, startY, endX, endY) {
                var dy = startY - endY;
                //var dx = endX - startX;
                var result = 0;
                if (dy > 0) { //向上滑动
                    result = 1;
                } else if (dy < 0) { //向下滑动
                    result = 2;
                } else {
                    result = 0;
                }
                return result;
            }
        } else {
            console.log("PC端");
            var flag = false;
            document.onmousedown = function(ev) {
                    flag = true;
                    PstartX = ev.pageX;
                    PstartY = ev.pageY;
                    console.log("start:" + PstartX, PstartY);
                    document.onmousemove = function(ev) {
                        PMoveX = ev.pageX;
                        PMoveY = ev.pageY;
                        if (flag) {
                            console.log("move:" + PMoveX, PMoveY);
                            var resutl = getpostion(PMoveY, PstartY);
                            switch (resutl) {
                                case 0:
                                    console.log("无操作");
                                    break;
                                case 1:
                                    console.log("向上");
                                    break;
                                case 2:
                                    console.log("向下");
                                    if (PMoveY - PstartY > 0) {
                                        if (PMoveY - PstartY >= 100) {
                                            document.getElementById("jifenContent").style.marginTop = "100px";
                                        } else {
                                            document.getElementById("jifenContent").style.marginTop = PMoveY - PstartY + "px";
                                        }
                                        document.getElementById("loadingpic").style.display = "block";
                                    }
                                    break;
                            }
                        }
                    }
                    document.onmouseup = function(ev) {
                        flag = false;
                        PendX = ev.pageX;
                        PendY = ev.pageY;
                        console.log("end:" + PendX, PendY);
                        var resutl = getpostion(PMoveY, PstartY);
                        switch (resutl) {
                            case 0:
                                console.log("无操作");
                                break;
                            case 1:
                                console.log("向上");
                                break;
                            case 2:
                                console.log("向下");
                                location.reload();
                                break;
                        }
                    }

                    function getpostion(PMoveY, PstartY) {
                        if (PMoveY - PstartY == 0) {
                            return 0; //无操作
                        }
                        if (PMoveY - PstartY < 0) {
                            return 1; //向上
                        }
                        if (PMoveY - PstartY > 0) {
                            return 2; //向下
                        }
                    }
                }
        }

猜你喜欢

转载自www.cnblogs.com/zmcxsf/p/10443189.html