멋 진 mip - infinitescoll 무한 스크롤 (무한 드 롭 다운)

앞 에 쓰다
무한 스크롤 (무한 드 롭 다운 이 라 고도 함) 기술 은 뉴스 류, 사진 미리 보기 류 사이트 에 광범 위 하 게 응용 된다.사용자 에 게 무한 스크롤 을 사용 하 는 페이지 는 끊 임 없 는 정 보 를 미리 볼 수 있 고 사용자 가 페이지 에 머 무 르 는 시간 을 늘 릴 수 있 습 니 다.기술적 원리 도 간단 하 다. 페이지 를 불 러 올 때 일부 내용 을 불 러 오고 사용자 가 끝까지 탐색 할 때 백 엔 드 에서 더 많은 내용 을 요청 하여 페이지 에 표시 하려 고 한다.따라서 mip - list 목록 구성 요소 에 이 어 사용자 체험 을 향상 시 키 기 위해 mip - infinitescroll 무한 스크롤 구성 요 소 를 개발 하 였 습 니 다.
간단 한 소개
mip - infinitescroll 은 무한 스크롤 구성 요소 입 니 다. 이름 처럼 지정 한 DOM 노드 (document.body 으로 고정) 의 스크롤 이 벤트 를 감청 합 니 다. 페이지 가 끝까지 굴 러 갈 때 인 터 페 이 스 를 통 해 데이터 list 를 비동기 로 요청 한 다음 사용자 가 지정 한 템 플 릿 에 따라 html 로 렌 더 링 하고 append 는 지정 한 용기 에 있 습 니 다.
mip - infinitescroll 초기 화 할 때 데 이 터 를 한 번 요청 한 다음 페이지 에 렌 더 링 합 니 다. 이때 데이터 가 화면 에 가득 깔 리 지 않 으 면 화면 이 가득 깔 릴 때 까지 데 이 터 를 계속 요청 합 니 다.
mip - infinitescroll 은 어떠한 스타일 제한 도 하지 않 았 습 니 다. 개발 자 는 수요 에 따라 구성 요소 가 페이지 에 있 는 스타일 을 스스로 보완 할 수 있 습 니 다. 즉, 원 하 는 대로 생 길 수 있 습 니 다.
예시
다음은 mip - infinitescroll 의 효과 전시 입 니 다. 페이지 를 미 끄 러 뜨리 는 과정 에서 페이지 아래쪽 의 알림 정 보 는 loading 입 니 다. 모든 데이터 가 불 러 오 면 페이지 아래쪽 의 알림 정 보 는 over 로 보 여 줍 니 다!
속성 및 하위 노드
페이지 에 mip - infinitescroll 구성 요 소 를 추가 하려 면 일부 속성 과 하위 노드 가 있어 야 하 며, mip - infinitescroll 일부 설정 매개 변 수 를 덮어 서 더욱 완벽 한 효 과 를 얻 을 수 있 습 니 다.

data-src 속성 (필수 옵션) 은 비동기 요청 데이터 의 인터페이스 로 https 를 지원 해 야 합 니 다.인터페이스 콜백 은 '콜백' 으로 설정 해 야 합 니 다.비동기 인터페이스 에서 돌아 오 는 데 이 터 는 다음 과 같은 형식 을 만족 시 켜 야 합 니 다:

{
    "statsu": 0,
     "data": {
         "items":[]
     }
}

status 0 요청 성공 표시

items: [] 렌 더 링 이 필요 한 데이터

.mip-infinitescroll-results 서브 노드 (필수 옵션) 는 결과 용기 로 비동기 요청 데이터 가 있 을 때마다 해당 하 는 html append 를 이 용기 에 넣 습 니 다.예 를 들 어 div 에 mip-infinitescroll-results class 를 더 하면 이 div 는 결과 용기 이 고 요청 한 데이터 가 렌 더 링 될 때마다 html 는 이 div 에 append 됩 니 다.

.mip-infinitescroll-loading 서브 노드 (필수 옵션) 알림 정보 용기, 비동기 요청 시 요청 실패 및 요청 성공 세 가지 상태 에 대응 하 는 알림 정보 가 있 습 니 다.설정 하지 않 으 면 알림 정보 가 보이 지 않 습 니 다.예 를 들 어 div 에 mip-infinitescroll-loading class 를 더 하면 이 div 는 정 보 를 제시 하 는 용기 입 니 다.

template 속성 (필수 옵션 이 아 닌) 은 템 플 릿 id 와 대응 하여 사용 하 는 템 플 릿 을 표시 합 니 다. 기본적으로 구성 요소 서브 노드 의 template 템 플 릿 을 가 져 옵 니 다.

script[type="application/json"] 서브 노드 (필수 옵션 이 아 닌)

    {
        "rn": 15,                  // results number          
        "prn": 3,                  // page result number     
        "pn": 1,                   // page number   
        "pnName": "pn",            //         
        "bufferHeightPx": 40,      //     ,                
        "loadingHtml": "loading",  // loading       
        "loadFailHtml": "failed",  //            
        "loadOverHtml": "over!"    //            
    }

MIP 홈 페이지 문서 mip - infinitescroll 무한 스크롤 에서 구성 요소 의 각 매개 변수 에 대한 설명, 사용 및 기본 값 등에 대해 상세 하 게 설명 하 였 습 니 다.
쓰다
우선, MIP 규범 에 맞 는 페이지 를 만 듭 니 다.그리고 mip - infinitescroll 구성 요소 스 크 립 트 와 html 라벨 을 추가 합 니 다.간단 한 데모 하나 로 완성 되 었 습 니 다.

    
        
        
        
        
        
        
    
    
        Hello MIP!
        
            
            {
                "rn": 15,
                "prn": 3,
                "pn": 1,
                "pnName": "pn",
                "bufferHeightPx": 40,
                "loadingHtml": "loading",
                "loadFailHtml": "failed",
                "loadOverHtml": "over!"
            }
            
            
            

            

        
        
        
        
    

뒤에 쓰다
질문 이 있 으 면 github issues 에 가서 질문 할 수 있 습 니 다.