[소소한 팁] 모바일 화면에서 페이지를 아래로 당겨서 리프레시 하기 > 팁 & 테크

안녕하세요.

얼마 전 이윰빌더를 설치하고 이것저것 커스텀 해보고 있는 신규회원입니다.

좋은 빌더를 만들어 주셔서 감사합니다. 조금이나마 도움이 되고자 작은 팁을 올립니다.

모바일 앱에서 많이 사용하는 페이지를 아래로 당겨서 해당 페이지를 갱신하는

스크립트와 적용하는 방법입니다.

1. 링크에 있는 사이트에서 직접 다운받으시거나 귀찮으시면 첨부한 pulltorefresh.js 스크립트를 다운 받으셔서 사용하시는 테마 경로에 업로드 하시고,

2. 아래 코드를 원하시는 페이지에 삽입하시면 간단하게 적용됩니다.

저는 이윰 기본 테마의 js폴더에 넣고 대부분의 페이지에서 적용하기 위해

eb4_basic 루트에 있는 head.html.php 의 최하단에 아래 코드를 넣었습니다.

----------------------

<script src="<?php echo EYOOM_THEME_URL; ?>/js/pulltorefresh.js"></script><!-- Page Pull to Refresh 스크립트 -->
<script> <!-- Page Pull to Refresh 설정 -->
PullToRefresh.init({
mainElement: '#header-fixed',
onRefresh: function() { location.reload(); }
});

<script>

--------------------

mainElement 에 지정한 부분이 페이지가 아래로 당겨지는 위치입니다. 페이지에 맞게 변경하시면 됩니다.

이 외에도 아래와 같은 주요 옵션들(기본값)이 있네요. js 파일을 직접 수정하시거나.

설정 부분에 변경이 필요한 부분만 추가하시면 되겠습니다.

    distThreshold: 80,   // 페이지 갱신이 가능해지는 높이
    distMax: 150,   // 최대로 당겨지는(벌어지는) 높이
    distReload: 60,   // 갱신 중 잠깐 멈추면서 보여지는 높이
    mainElement: 'body',   // 갱신 페이지가 적용되는 부분
    iconArrow: '&#8675;',   // 페이지 갱신 가능 전 기본으로 보여지는 화살표
    iconRefreshing: '&hellip;',    // 페이지 갱신이 가능할 때 보여지는 화살표
    instructionsPullToRefresh: 'Pull down to refresh',   // 페이지를 당기면 바로 보여지는 메시지
    instructionsReleaseToRefresh: 'Release to refresh',   // 페이지 갱신이 가능할 때 보여지는 메시지
    instructionsRefreshing: 'Refreshing',   // 갱신중에 보여지는 메시지
    refreshTimeout: 500,  // 갱신 시 노출 시간

더욱 자세한 사항은 아래 홈페이지를 참고하세요.

https://www.boxfactura.com/pulltorefresh.js/