Mip의 무한 스크롤 구성 요소는 무엇입니까

이 글에서는 MIP의 무한 스크롤 구성요소를 주로 소개합니다.

MIP는 모바일 웹 가속기입니다. MIP의 무한 스크롤 구성 요소(mip-infinitescroll 무한 스크롤)는 사용자가 페이지 하단으로 스크롤할 때 더 많은 데이터가 비동기적으로 로드된다는 의미이며, 이는 일반적으로 정보 추천에 적합합니다.

이 효과는 모바일 타오바오에서 쇼핑할 때 상품 목록을 슬라이드하면 새로운 상품 데이터가 지속적으로 로드되는 것과 동일합니다. 분명히 이 무한 스크롤 로딩 효과는 일상적인 프로젝트에서도 매우 일반적입니다.

자세한 매뉴얼을 참조하는 것이 좋습니다: "MIP Documentation Manual"

이제 컴포넌트 코드를 기반으로 MIP의 무한 스크롤 컴포넌트에 대해 자세히 소개하겠습니다.

MIP의 무한 스크롤 구성 요소의 코드 예는 다음과 같습니다.

<mip-infinitescroll data-src="xxx" template="myTemplate">
    <script type="application/json">
    {
        "rn": 40,
        "pn": 1,
        "prn": 6,
        "pnName": "pn",
        "bufferHeightPx": 40,
        "timeout": 5000,
        "loadingHtml": "更多数据正在路上",
        "loadFailHtml": "数据加载失败啦",
        "loadOverHtml": "没有数据了哦"
    }
    </script>
    <template type="mip-mustache" id="myTemplate">
        <li>
            <mip-img src="{{img}}"
                layout="responsive" width="100" height="100">
            </mip-img>
            <p>序号:{{number}}</p>
        </li>
    </template>
    <div class="mip-infinitescroll-results"></div>
    <div class="bg">
        <div class="mip-infinitescroll-loading"></div>
    </div>
</mip-infinitescroll>

mip 파일에서 무한 스크롤 구성 요소를 사용할 때 다음 두 개의 js 스크립트를 도입해야 합니다.

<script src="https://c.mipcdn.com/static/v1/mip-infinitescroll/mip-infinitescroll.js"> </script>
<script src="https://c.mipcdn.com/static/v1/mip-mustache/mip-mustache.js"> </script>

관련 속성 소개:

data-src: 비동기 요청 데이터 인터페이스(JSONP 요청만 지원)

template: 사용된 템플릿을 식별하는 데 사용되는 템플릿 ID에 해당합니다. 설정되지 않은 경우 구성 요소 하위 노드의 d477f9ce7bf77f53fbcf36bec1b69b7a

rn: 결과 번호, 표시해야 하는 총 결과 수입니다. 기본값: 20

pn: 페이지 번호, 요청할 페이지. 기본값: 1

prn: 페이지 결과 수, 각 요청에 대해 요청된 데이터 수. 기본값: 6

pnName: 페이지 넘김 키워드. 기본값 : pn

bufferHeightPx : 버퍼 높이, 하단에서 일정 높이 이상일 때 미리 데이터를 요청합니다. 기본값: 10

loadingHtml: 로드 시 프롬프트 복사. 기본값: Loading...

loadFailHtml: 로드 실패 시 프롬프트 복사, 비동기 요청 시간이 초과되거나 실패할 때 트리거됩니다. 기본값: 로딩 실패

loadOverHtml: 로딩 완료 시 프롬프트 복사. 기본값: 로드됨. 기본값: 로딩 완료

timeout: fetch-jsonp 요청 시간 초과. 단위는 ms이고 기본값은 5000입니다.

참고:

1. 비동기 요청 인터페이스는 HTTPS

2여야 합니다. 비동기 요청 인터페이스는 콜백을 '콜백'

3으로 지정해야 합니다. 형식:

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

여기서 상태: 0은 요청이 성공했음을 의미합니다. 항목: 렌더링해야 하는 데이터입니다.

이 글은 MIP의 무한 스크롤 구성 요소에 대한 소개이기도 하며, 도움이 필요한 친구들에게 도움이 되기를 바랍니다.

위 내용은 Mip의 무한 스크롤 구성 요소는 무엇입니까의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!