• 이윰빌더 시즌 4
  • 테마/스킨상점
이윰

팁 & 테크

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

  • - 첨부파일 : pulltorefresh.js (11.1K) - 다운로드

본문

안녕하세요.

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

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

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

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

 

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/

 

 

2
로그인 후 추천 또는 비추천하실 수 있습니다.
추천한 회원 보기

댓글목록 5

red123님의 댓글

회원사진

혹시 스크롤을 내리면 자동으로 동작한느 무한 스크롤이나 하단 버튼을 누르면 스크롤 추가가 되는 방법도 팁으로 알려주실 수 있으실까요?
스트립트 예제를 보긴 봤는데 막상 적용해보려니 생각만큼 쉽지 않더라고요

축하합니다. 첫댓글 포인트 43포인트를 획득하였습니다.

inglabs님의 댓글의 댓글

안녕하세요. red123님. 무한스크롤 기능이 이윰빌더에 기본적으로 포함되어 있는 것 같던데요.
* 테마설정 관리 > 게시판 추가설정 에 보시면 '목록에서 무한스크롤 사용' 이라는 부분이 있습니다. 다만, basic 게시판은 제외라고는 적혀 있네요...
이거 해보시면 갤러리나 웹진 게시판은 되지 않을까요? 저도 이부분은 아직 적용을 안해봐서 모르겠는데요. 일반 게시판에서 적용하시려면 관련 스크립트가 엄청 많을 거긴 합니다. 아직 이윰빌더에 적응중이라 지금 정확한 답변을 드리기는 어려울 것 같습니다. 나중에 해보고 문제가 없으면 쪽지드려 보겠습니다. 수고하세요~

red123님의 댓글의 댓글

회원사진

네 감사합니다 ^^
메인화면이랑 특정 게시판에 넣어보고 싶어서 알아봤었거든요

혹시 나중에 시도하실 기회가 있으시면 공유 부탁 드리겠습니다
좋은 하루 되세요 ㅎ

이윰MOUNT님의 댓글

회원사진

모바일에서 메인 최신글 및 게시판 새로 고침시 편할것 같습니다.
향후 이윰빌더에 적용할 수 있도록 고민해 보겠습니다.
좋은 정보 감사합니다.^^

용개뤼님의 댓글

와우~~ 좋은정보 감사해요 ^^

전체 15 건 - 1 페이지
제목
꿈의세계 45 0 2019.06.11
용개뤼 43 0 2019.05.24
seodaewon 141 0 2019.03.27
inglabs 484 2 2019.03.04
cygz 355 0 2018.11.19
회원사진 JamesShin 713 2 2018.11.16
회원사진 JamesShin 725 0 2018.11.11
닥터캐빈 324 0 2018.11.08
회원사진 JamesShin 398 0 2018.11.02
회원사진 JamesShin 492 2 2018.10.21
회원사진 JamesShin 356 1 2018.10.20
회원사진 JamesShin 372 2 2018.10.19
회원사진 JamesShin 918 2 2018.10.20
회원사진 Rido 629 2 2018.09.21
빠빠라기 943 1 2018.08.16