mip-list 목록 구성 요소

mip-list 목록 구성 요소는 동기 데이터를 렌더링하거나 데이터에 대한 비동기 요청 후 렌더링할 수 있습니다.

예

기본 사용법

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

사용자 정의 템플릿

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

동기화된 데이터

<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>

Click 더 로드

<mip-list template="mip-template-id" src="http://xxx?" id="mip-list" has-more>
    <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>

속성

src

설명: 비동기 요청을 위한 데이터 인터페이스
필수 옵션: No
유형: 문자열
값 범위: https
단위: 없음
이어야 함기본값: 없음

동기 -data

설명: 동기화된 데이터 스위치 속성 사용
필수 옵션: 아니요
유형: 문자열
값 범위: 없음
단위: 없음
기본값: 없음

id

설명: mip-list 구성 요소 ID
필수 옵션: 아니요
유형: 문자열
값 범위: 문자열
단위: 없음
기본값: 없음

has-more

설명: 더 많은 기능을 확장하려면 클릭 여부
필수 옵션: No
유형: 문자열
값 범위: 없음
단위: 없음
기본값: 없음

Notes

• 비동기 요청에 대한 인터페이스는 콜백을 '콜백'으로 표준화해야 합니다.
• has-more 속성이 있는 경우 mip-list 태그가 필요합니다. id 속성이 있고, 버튼을 클릭하는 dom 노드가 있어야 하며 이 노드에는 on 속성이 있습니다. 속성 값은 다음과 같습니다. tap: mip-list