What is the infinite scroll component in Mip

This article mainly introduces to you the infinite scroll component in MIP.

MIP is Mobile Web Page Accelerator. The infinite scroll component in MIP (mip-infinitescroll infinite scroll) means that when the user scrolls to the bottom of the page, more data is loaded asynchronously, which is usually suitable for information recommendation.

This effect is equivalent to when we are shopping on mobile Taobao, when we slide the list of products, new product data will be continuously loaded. Obviously this infinite scroll loading effect is also very common in our daily projects.

It is recommended to refer to the detailed manual: "MIP Documentation Manual"

Below we will give you a detailed introduction to the infinite scroll component in MIP based on the component code.

The code example of the infinite scroll component in MIP is as follows:

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

When using the infinite scroll component in the mip file, the following two js scripts must be introduced

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

Introduction to related attributes:

data-src: asynchronous request data interface (only supports JSONP requests)

template: and template id Corresponding, used to identify the template used. If not set, the d477f9ce7bf77f53fbcf36bec1b69b7a

rn in the component sub-node will be taken by default: results number, the total number of results to be displayed. Default value: 20

pn: page number, which page to request. Default value: 1

prn: page result number, the number of data requested for each request. Default value: 6

pnName: Page turning keyword. Default value: pn

bufferHeightPx: Buffer height, request data in advance when it is a certain height from the bottom. Default value: 10

loadingHtml: Prompt copy when loading. Default value: Loading...

loadFailHtml: Prompt copy when loading fails, triggered when the asynchronous request times out or fails. Default value: Loading failed

loadOverHtml: Prompt copy when loading is complete. Default value: Loaded. Default value: Loading completed

timeout: timeout for fetch-jsonp request. The unit is ms and the default value is 5000.

Note:

1. The asynchronous request interface must be HTTPS

2. The asynchronous request interface needs to specify the callback as 'callback'

3. The data format returned by the interface needs to be in the following format:

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

Among them, status: 0 indicates that the request is successful. items: is the data that needs to be rendered.

This article is an introduction to the infinite scroll component in MIP. It is also relatively simple and easy to understand. I hope it will be helpful to friends in need!

The above is the detailed content of What is the infinite scroll component in Mip. For more information, please follow other related articles on the PHP Chinese website!