How to use list components in Mip

This article mainly introduces the use of list components in MIP.

The list component in MIP (Mobile Web Accelerator) can render synchronous data, or render data after requesting it asynchronously.

Recommended reference manual: "MIP Documentation Manual"

Below we will introduce the use of list components in MIP in detail through component code examples.

If we want to run the list component in the mip file, we need to introduce the following js script into the mip file body:

<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. Basic usage

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

Note: The interface for JSONP asynchronous requests needs to follow the specification callback as 'callback'.

2. Customized template

<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. Synchronized data

<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. Click to load more

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

Note: When there is a has-more attribute, the tag must have an id attribute, and there must be a DOM node for clicking the button, and this node must have on attribute, the attribute value is: tap: corresponding to the id.more of mip-list

Related attribute introduction:

src: Data interface for asynchronous requests, if there is no other Please don’t include the end of the parameter?

synchronous-data: Use synchronous data switch attribute

id: component id

has-more: Is there any click to expand more functions?

pnName: page turning variable name

pn: page turning initial page number, each request will automatically add 1

preLoad: Load data asynchronously. If you add the preLoad parameter, the first page of content will be loaded during initialization.

timeout: The timeout of the fetch-jsonp request.

This article is an introduction to the use of list components in MIP. I hope it will be helpful to friends in need! Then there are more common MIP components, such as Carousel component, Inline frame component, Collapse menu component, App promotion download component, Mip form component, Mip quick return component, etc. Interested friends can also refer to related articles to learn!

The above is the detailed content of How to use list components in Mip. For more information, please follow other related articles on the PHP Chinese website!