찾다

집 >웹 프론트엔드 >JS 튜토리얼 >Iscool 풀다운 새로 고침 구현 방법

Iscool 풀다운 새로 고침 구현 방법

小云云
小云云원래의
2018-01-06 10:23:211450검색

이 글에서는 주로 Iscool 풀다운 새로 고침 기능을 구현하는 방법(권장)을 제공합니다. 편집자님이 꽤 좋다고 생각하셔서 지금 공유하고 모두에게 참고용으로 드리도록 하겠습니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.

간단한 풀다운 새로 고침 구현 방법

css 스타일: 

*{
        margin: 0px;
        padding: 0px;
        
      }
      #wrapper{
        width: 100%;
        height: 150px;
        border: 1px solid red;
        overflow: hidden;
        position: absolute;
      }
      #shua{
        text-align: center;
      }

HTML 코드

<p id="wrapper">
      <p>
        <p id="shua">刷新</p>
        <ul>
          <li>1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
          <li>5</li>
          <li>6</li>
          <li>7</li>
          <li>8</li>
          <li>9</li>
          <li>10</li>
        </ul>
      </p>
    </p>

js 코드를 작성하기 전에 jQuery 플러그인과 iscroll 플러그인을 도입해야 합니다

그러면 js 코드는 다음과 같습니다.