博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
pc端和移动端下拉刷新
阅读量:6956 次
发布时间:2019-06-27

本文共 6001 字,大约阅读时间需要 20 分钟。

在开发中有时候会有下拉刷新的需求,自己项目中有用到,把代码整理如下,其中移动端与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; //向下                        }                    }                }        }

 

转载于:https://www.cnblogs.com/zmcxsf/p/10443189.html

你可能感兴趣的文章
ASP.NET 英语词典
查看>>
PetShop 4.0学习笔记:消息队列MSMQ
查看>>
php不使用copy()函数复制文件的方法
查看>>
ACM HDU 1064
查看>>
沙盒技术——selinux控制
查看>>
2019年第四次课程设计实验报告
查看>>
LeetCode - Spiral Matrix
查看>>
webSocket使用心跳包实现断线重连
查看>>
数列的周期性
查看>>
MySQL错误ERROR 1786 (HY000)解决
查看>>
.Net码农就业求职储备(新手进阶)
查看>>
Python 常用函数Logging
查看>>
Android 退出app,后台推送的服务也停止了,怎么可以做到不停止后台服务呢?
查看>>
Picasso通过URL获取--用户头像的圆形显示
查看>>
$()和${}
查看>>
记录centos7下tomcat部署war包过程
查看>>
vue的自定义指令的坑
查看>>
UITableView介绍 之 复杂cell的高度计算
查看>>
闭包问题
查看>>
js jquery select 操作 获取值,选中选项,增加,修改,删除
查看>>