pull to refresh 각도설정 추가

 

 

github.com/BoxFactura/pulltorefresh.js/blob/master/README.md

BoxFactura/pulltorefresh.js

 

웹앱에 위 플러그인을 추가하여 당겨서 새로고침 기능을 추가했다.

네이티브에서 메뉴 페이지 스와이프기능을 제공하고

각 페이지내에 아래로 당겨서 새로고침 되는 기능 추가!

 

 

다음페이지 넘길 목적으로 검지로 스와이프를 할 경우 손가락 방향이 사선이 된다

스와이프시 페이지이동과 pull to refresh가 동시에 일어나 보기싫게 덜렁덜렁 거리게 된다

 

그래서 touchstart와 touchmove의 Y값을 비교해 각도가 설정한 45도 이하일 경우에만 실행하게 변경했다.

 

 

 

각도 구하는 공식

let touchAngle = Math.atan2(Math.abs( touchMoveYpos - touchStartYpos ), Math.abs( touchMoveXpos - touchMoveXpos )) * 180 / Math.PI;

 

Math.atan2

아크탄젠트(arctangent) 값을 리턴한다.

아크탄젠트란?

역(逆)탄젠트 함수를 뜻하는 삼각함수론 용어. 일반각 의 탄젠트 함수를 x라 하면 x=tan이다.
이러한 탄젠트 함수의 역함수(逆函數)를 아크탄젠트 또는 역탄젠트 함수라 부르며 =tan 또는 =arctan 라고 표시한다.
아크탄젠트는 8의 범위를 -π/2<tan <π/2로 한정하면 1가함수(一價函數)가 된다.
이 1가함수의 값을 아크탄젠트의 주값(主値)이라 하고 =Arctan 라고 표시하기도 한다.

?....??????

 

Math.abs

실수에서 부호를 제거한 절대값을 리턴

 

 

 

if (90 - parseInt(touchAngle) < 45) return;

 

이 공식으로 원하는 각도(45)보다 클 경우 return 하는 구문을 추가했는데

적용해보니 손가락이 사선 보다는 포물선으로 그려져 다음페이지로 스와이프 되다가 마지막에 pull-to-refresh가 실행되서 또! 덜렁거린다...ㅜㅜ!

 

하여 isScrolling 이란 flag를 넣어 touchstart시 undefined 할당

touchmove시 isScrolling이 undefined일 경우 각도계산 시작 (touch move 시 true or false 할당되어 다시 touchstart 가 시작 될때까지 계산 안됨)

각도가 45도 이하일 경우 isScrolling에 true 반환, 45도 이상일경우 false

isScrolling이 false일경우 return

if (typeof isScrolling === 'undefined') {
   var touchAngle = Math.atan2(Math.abs(_shared.pullMoveY - _shared.pullStartY), Math.abs(_shared.pullMoveX - _shared.pullStartX)) * 180 / Math.PI;
   isScrolling = 90 - parseInt(touchAngle) < _el.touchAngle;
}
if (!isScrolling) { return; }

 

 

 

 

 

 

 

 

 

default.js

설정각도 추가

export default {
  ...
  touchAngle: 45,
  ...
};

 

events.js

1. x값 위치를 알아야 하기 때문에 screenY함수를 복사해서 screenX함수 추가

 

2. isScrolling

scrolling이 아닐경우 return 시키는 flag

  2-1. 진입시 isScrolling 변수를 생성

  2-2. touch start이벤트 발생시 isScrolling에 undefined 할당

  2-3. touch move이벤트 발생시 각도 계산후 설정한 각도(touchAngle)보다 크면 false, 작으면 true ( if (!isScrolling) return; )

 

3. touchEnd이벤트 발생시 X값 초기화 추가

_shared.pullStartX = _shared.pullMoveX = null;

 

...
const screenY = function screenY(event) {
	...
};
const screenX = function screenX(event) {
  if (_shared.pointerEventsEnabled && _shared.supportsPointerEvents) {
    return event.screenX;
  }
  return event.touches[0].screenX;
};

export default () => {
  ...
  let isScrolling;

  function _onTouchStart(e) {
    ...
    isScrolling = undefined;
    ...
    
    if (target && _shared.state === 'pending') {
      ...

      if (target.shouldPullToRefresh()) {
        ...
        _shared.pullStartX = screenX(e);
      }
	  ...
    }
  }

  function _onTouchMove(e) {
    ...

    if (!_shared.pullStartY) {
      if (_el.shouldPullToRefresh()) {
        ...
        _shared.pullStartX = screenX(e);
      }
    } else {
      ...
      _shared.pullMoveX = screenX(e);
    }

    ...
    
    if (typeof isScrolling === 'undefined') {
      let touchAngle = Math.atan2(Math.abs(_shared.pullMoveY - _shared.pullStartY), Math.abs(_shared.pullMoveX - _shared.pullStartX)) * 180 / Math.PI;
      isScrolling = (90 - parseInt(touchAngle) < _el.touchAngle);
    }
    if (!isScrolling) return;
    ...
  }

  function _onTouchEnd() {
    ...
    ...
    _shared.pullStartX = _shared.pullMoveX = null;
    ...
  }
...
};