zoukankan      html  css  js  c++  java
  • 下拉刷新

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" id="viewport" name="viewport">
    <title>下拉刷新</title>
    </head>
    <body style="margin: 0">
    <div class="a" style="padding-top:100px;background-color: #00bcd4; height: 200px;">
    <div>dsfsdf</div>
    </div>
    <style>
    .TouchSX{

    }
    </style>
    <script>
    TouchFun({obj:".a"},function(){
    alert(1);
    });
    // TouchFun({
    // obj:对象
    // h:下拉距离
    // },function(){
    // 回调函数
    // })
    function TouchFun(parameter,fn){
    var win = window,touch,YA,YB,obj,objCss,pa,pos,TimeFun,index,h;
    if(parameter["h"] == undefined){
    h = 150;//默认下拉距离
    };
    var TouchFun = {
    a:function(e){
    touch = TouchFun.touch(e,0);
    YA = touch.pageY;
    obj = document.querySelector(parameter.obj);//对象
    objCss = getComputedStyle(obj,null);
    pa = parseInt(objCss.paddingTop.replace(/px/ig,""));
    pos = objCss.position;
    if(pos != "absolute" && pos != "fixed" && pos != "relative"){
    obj.style.position = "relative";
    };
    var div = document.createElement("div");//创建div(下拉信息提示)
    var divcss = div.style;
    div.className = "TouchSX";
    div.innerHTML = "正在刷新";
    divcss.textAlign = "center";
    divcss.lineHeight = "40px";
    divcss.fontFamily = "微软雅黑";
    divcss.fontSize = "14px";
    divcss.position = "absolute";
    divcss.width = "100%";
    divcss.left = 0;
    divcss.top = 0;
    divcss.color = "#fff";
    divcss.display = "none";
    divcss.backgroundColor = "rgba(0,0,0,0.3)";
    obj.insertBefore(div,obj.childNodes[0]);
    },
    b:function(e){
    if(parseInt(objCss.paddingTop.replace(/px/ig,"")) == pa && YB > 0){
    document.querySelector(".TouchSX").style.display = "block";
    e.preventDefault();
    }
    touch = TouchFun.touch(e,0);
    YB = Math.ceil(touch.pageY - YA);
    if(YB > 15){
    document.querySelector(".TouchSX").innerHTML = "松开刷新";
    obj.style.paddingTop = pa+YB+"px";
    };
    },
    c:function(e){
    index = YB;
    document.querySelector(".TouchSX").innerHTML = "加载中...";
    TimeFun = setInterval(function(){
    if(index > pa){
    index -- ;
    obj.style.paddingTop = index+"px";
    if(YB >= h){
    document.querySelector(".TouchSX").innerHTML = "加载成功";
    };
    }else{
    clearInterval(TimeFun);
    obj.style.paddingTop = pa+"px";
    obj.removeChild(document.querySelector(".TouchSX"));
    if(YB >= h && fn != undefined){
    fn(".TouchSX");
    };
    };
    },30 - (YB-h));
    },
    touch:function(e,index){
    return e.targetTouches[index];
    }
    };
    win.addEventListener("touchstart",TouchFun.a);
    win.addEventListener("touchmove",TouchFun.b);
    win.addEventListener("touchend",TouchFun.c);
    }
    </script>
    </body>
    </html>
  • 相关阅读:
    IP掩码的作用
    linux shell 笔记
    ubuntu apt-get Failed to fetch Temporary failure resolving 'security.ubuntu.com'
    ubuntu 16.04 & 18.04 远程桌面使用
    取消Ubuntu开机硬盘自检
    linux shell 脚本输入参数解析
    Ubuntu 16.04 + python3 源码 安装+使用labelImg最新版
    用tinyxml2读写xml文件_C++实现
    常用工具问题及解决方案
    可视化调试工具
  • 原文地址:https://www.cnblogs.com/zys8119/p/5612996.html
Copyright © 2011-2022 走看看