Mip의 무한 스크롤 구성 요소는 무엇입니까-HTML 지식-php.cn

이 글에서는 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에 해당합니다. 설정되지 않은 경우 구성 요소 하위 노드의