web pull to refresh

웹 1.1을 위해 새로 고침을 당기십시오

이것은 웹의 구현을 새로 고칠 수있는 풀입니다. 버터 UX 성능 및 반응성에 중점을 두어 가능한 한 기본 구현에 가깝게 느껴집니다.

데모를 시도하십시오 | 블로그 게시물을 읽으십시오

용법

컨텐츠 요소와 풀로 UX 요소가 필요한 두 가지 핵심 요소가 있습니다. 데모는이 설정을 사용하지만 원하는대로 수정할 수 있습니다.

 <div id="ptr">
  <!-- Pull down arrow indicator -->
  <span class="genericon genericon-next"></span>

  <!-- CSS-based loading indicator -->
  <div class="loading">
    <span id="l1"></span>
    <span id="l2"></span>
    <span id="l3"></span>
  </div>
</div>

<div id="content">
  <!-- Content that should be draggable for refreshing goes in here -->
</div>

이것은 자신의 로딩 표시기 또는 화살표를 잡아 당기기 위해 잘 작동합니다. 풀을 고정하여 UX를 새로 고치기 위해 사용하는 요소에 싸여 있는지 확인하십시오. 데모와 유사한 시각적 설정을 사용하려면 CSS를 포함하는 것을 잊지 마십시오.

이 기능을 수행하려면 Hammer.js와 WPTR.JS 스크립트를 모두로드 한 다음 WebPullToreFresh 모듈을 초기화해야합니다. 닫는 바디 태그 직전에 이것을 추가하십시오.

 <script src="lib/hammer.2.0.4.js"></script>
<script src="lib/wptr.1.0.js"></script>

<script>
  window.onload = function() {
    WebPullToRefresh.init( {
      loadingFunction: exampleLoadingFunction
    } );
  };
</script>

또한 시작 시간에 로딩 기능을 제공해야합니다. 이 기능은 새 항목을로드하는 데 필요한 비동기 로딩 조각을 수행하고 약속을 반환해야합니다.

 var exampleLoadingFunction = function() {
  return new Promise( function( resolve, reject ) {
    // Run some async loading code here

    if ( /* if the loading worked */ ) {
      resolve();
    } else {
      reject();
    }
  } );
};

선택적 매개 변수

초기화를 전달할 수있는 몇 가지 선택적 매개 변수가 있습니다.

 {
	// ID of the element holding dragable content area
	contentEl: 'content', 

	// ID of the element holding pull to refresh loading area
	ptrEl: 'ptr', 

	// Number of pixels of dragging down until refresh will fire
	distanceToRefresh: 70, 

  // The dragging resistance level, the higher the more you'll need to drag down.
  resistance: 2.5
}

데모를 시도하십시오 | 블로그 게시물을 읽으십시오