zoukankan      html  css  js  c++  java
  • 移动web前端下拉刷新效果

    直接复制粘贴 放在页面中即可

    <script>
    window.onload = function(){
    window.addEventListener('touchstart', touchstart, false);
    window.addEventListener('touchmove', touchMove, false);
    }

    var _start = 0; 
    var _end = 0;
    function touchstart(event) {
    var touch = event.targetTouches[0];
    _start = touch.pageY; 
    }
    function touchMove(event){ 
    var touch = event.targetTouches[0]; 
    _end = ( touch.pageY - _start); 
    //下滑才执行操作 
    if(_end > 200){     //200即手机下滑屏幕的距离,超过200则执行刷新动作
    location.reload();


    </script>

    <script type="text/javascript">
    //全局变量,触摸开始位置
    var startX = 0, startY = 0;
    
    //touchstart事件
    function touchSatrtFunc(evt) {
    try {
    //evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等
    var touch = evt.touches[0]; //获取第一个触点
    var y = Number(touch.pageY); //页面触点Y坐标
    //记录触点初始位置
    
    if (y < 370) {
    window.location.href = window.location.href;
    }
    }
    catch (e) {
    
    }
    }
    
    //绑定事件
    function bindEvent() {
    document.addEventListener('touchstart', touchSatrtFunc, false);
    
    }
    //判断是否支持触摸事件
    function isTouchDevice() {
    try {
    document.createEvent("TouchEvent");
    
    bindEvent(); //绑定事件
    }
    catch (e) {
    }
    }
    window.onload = isTouchDevice;
    </script>
    

      

  • 相关阅读:
    linux报错-bash: ./xx.sh: Permission denied
    shell脚本报错:-bash: xxx: /bin/bash^M: bad interpreter: No such file or directory
    点灯
    笑话
    bzoj 4898: [Apio2017]商旅
    bzoj 4446: [Scoi2015]小凸玩密室
    bzoj 4237: 稻草人
    idea
    springmvc集成swagger实现接口文档自动化生成
    基本的内存泄漏的解释
  • 原文地址:https://www.cnblogs.com/roxanneQQyxm/p/10980911.html
Copyright © 2011-2022 走看看