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);