Mip에서 목록 구성 요소를 사용하는 방법

이 글에서는 주로 MIP에서 목록 구성 요소를 사용하는 방법을 소개합니다.

MIP(Mobile Web Accelerator)의 목록 구성 요소는 동기식 데이터를 렌더링하거나 비동기식으로 데이터를 요청한 후 렌더링할 수 있습니다.

추천 참고 매뉴얼: "MIP Documentation Manual "

아래에서는 MIP 목록에 대해 자세히 소개하겠습니다. 컴포넌트 코드 예제를 통해 컴포넌트 사용.

mip 파일에서 목록 구성 요소를 실행하려면 mip 파일 본문에 다음 js 스크립트를 도입해야 합니다:

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

1. 기본 사용법#🎜 🎜#

<mip-list src="https://xxx" preLoad>
    <template type="mip-mustache">
        <div>
            <li>name: {{name}}</li>
            <li>alias: {{alias}}</li>
        </div>
    </template></mip-list>

참고: JSONP 비동기 요청에 대한 인터페이스는 사양 콜백을 '콜백'으로 따라야 합니다.

2. 맞춤 템플릿

<mip-list template="mip-template-id" src="https://xxx" preLoad>
    <template type="mip-mustache" id="mip-template-id">
        <div>
            <li>name: {{name}}</li>
            <li>alias: {{alias}}</li>
        </div>
    </template></mip-list>

3. 동기화된 데이터

<mip-list synchronous-data>
    <script type="application/json">
        {            "items": [
                {                    "name": "lee",                    "alias": "xialong"
                }, {                    "name": "ruige",                    "alias": "ruimm"
                }, {                    "name": "langbo",                    "alias": "bobo"
                }
            ]
        }    </script>
    <template type="mip-mustache">
        <div>
            <li>name: {{name}}</li>
            <li>alias: {{alias}}</li>
        </div>
    </template></mip-list>

4. 더 많은 것을 로드하려면 클릭하세요

<mip-list 
    template="mip-template-id"
    src="http://xxx?a=a&b=b"
    id="mip-list"
    has-more
    pnName="pageNum"
    pn=2
    timeout="3000"
    preLoad>
    <template type="mip-mustache" id="mip-template-id">
        <div>
            <li>{{key}}: {{value}}</li>
        </div>
    </template></mip-list><div class="mip-list-more" on="tap:mip-list.more"> 点击查看更多 </div>

참고: has-more 속성이 있는 경우 존재해야 합니다. id 속성에는 버튼을 클릭하는 DOM 노드가 필요하며 이 노드에는 on 속성이 있습니다. 탭: mip-list의 ID에 해당합니다.more

# 🎜🎜#관련 속성 소개: # 🎜🎜#

src: 비동기 요청을 위한 데이터 인터페이스, 끝에 다른 매개변수가 없으면 포함하지 마세요.

synchronous-data: 동기 데이터 스위치 속성 사용

id: 구성 요소 ID
#🎜🎜 #

has-more: 더 많은 기능을 확장하려면 클릭하세요. 각 요청마다 초기 페이지 번호가 자동으로 1씩 추가됩니다. 시간 초과: fetch-jsonp 요청에 대한 시간 초과입니다.

이 문서는 MIP에서 목록 구성 요소를 사용하는 방법에 관한 것입니다. 도움이 필요한 친구들에게 도움이 되기를 바랍니다! 그 다음에는

Carousel 컴포넌트

,
Inline 프레임 컴포넌트

,

Collapse menu 컴포넌트
, #🎜 🎜#App과 같은 더 일반적인 MIP 컴포넌트가 있습니다. 프로모션 다운로드 구성 요소

,

Mip 양식 구성 요소
,

Mip 빠른 반환 구성 요소

등. 관심 있는 친구들도 관련 기사를 참조하여 배울 수 있습니다!

위 내용은 Mip에서 목록 구성 요소를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!