☰

DragDown to Refesh

手机浏览器，下拉刷新，测试中

  1. // ==UserScript==
  2. // @name         DragDown to Refesh
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.1
  5. // @description  手机浏览器，下拉刷新，测试中
  6. // @author       You
  7. // @include        *
  8. // @grant        none
  9. // ==/UserScript==
  10.  
  11. (function(window) {
  12.     var refreshText = document.createElement('p');
  13.     refreshText.id = "refreshText";
  14.     refreshText.style.cssText = "position: absolute; width: 100%; line-height: 50px; text-align: center; left: 0; top: 0; font-size: 3em;";
  15.     document.body.insertBefore(refreshText,document.body.firstChild);
  16.  
  17.     const SENSITIVE = 250,//达到这个阈值才会刷新
  18.     TIPSHEIGHT = 80;  //这个是显示框宽度
  19.     var _element = document.body,
  20.         // _refreshText = document.querySelector('.refreshText'),
  21.         _refreshText = document.getElementById('refreshText'),
  22.         _startPos = 0,
  23.         _transitionHeight = 0,
  24.         _reloadFlag = 0;
  25.     _element.addEventListener('touchstart', function(e) {
  26.         // console.log('初始位置：', e.touches[0].pageY);
  27.         _startPos = e.touches[0].pageY;
  28.         _element.style.position = 'relative';
  29.         _element.style.transition = 'transform 0s';
  30.     }, false);
  31.  
  32.     _element.addEventListener('touchmove', function(e) {
  33.         _transitionHeight = e.touches[0].pageY - _startPos;
  34.         if (_transitionHeight > 10) {
  35.             _element.style.transform = 'translateY('+Math.min(TIPSHEIGHT,_transitionHeight)+'px)';
  36.             if(_transitionHeight >= SENSITIVE){
  37.                 _refreshText.style.color = "yellowgreen";
  38.             }
  39.             switch(Math.ceil(_transitionHeight/50)){
  40.                 case 0:
  41.                 _refreshText.innerText = '○○○○○';
  42.                 break;
  43.                 case 1:
  44.                 _refreshText.innerText = '●○○○○';
  45.                 break;
  46.                 case 2:
  47.                 _refreshText.innerText = '●●○○○';
  48.                 break;
  49.                 case 3:
  50.                 _refreshText.innerText = '●●●○○';
  51.                 break;
  52.                 case 4:
  53.                 _refreshText.innerText = '●●●●○';
  54.                 break;
  55.                 case 5:
  56.                 _refreshText.innerText = '●●●●●';
  57.                 break;
  58.             };
  59.         }
  60.     }, false);
  61.     _element.addEventListener('touchend', function(e) {
  62.         _element.style.transition = 'transform 0.1s ease 0.2s';
  63.         _element.style.transform = 'translateY(0px)';
  64.         if(_transitionHeight >= SENSITIVE){
  65.             location.reload();
  66.         }
  67.     }, false);
  68. })(window);