mip-infinitescroll 无限滚动组件

示例

基本用法

<mip-infinitescroll data-src="xxx" template="myTemplate">
    <script type="application/json">
    {
        "rn": 40,
        "prn": 3,
        "pn": 1,
        "pnName": "pn",
        "bufferHeightPx": 40,
        "loadingHtml": "loading",
        "loadFailHtml": "failed",
        "loadOverHtml": "over!"
    }
    </script>
    <template type="mip-mustache" id="myTemplate">
        <li>
            <mip-img
                layout="responsive"
                width="600"
                height="120"
                src="{{img}}">
            </mip-img>
            <p>序号:{{number}}</p>
        </li>
    </template>
    <div class="mip-infinitescroll-results"></div>
    <div class="mip-infinitescroll-loading"></div>
</mip-infinitescroll>

属性

data-src
说明：异步请求数据接口
必选项：是
类型：字符串
取值范围：无
单位：无
默认值：无

template
说明：与模板 id 对应，用来标识所采用的模板，如不设置，则默认取组件子节点中的template
必选项：否
类型：字符串
取值范围：无
单位：无
默认值：无

子节点

.mip-infinitescroll-results
说明：结果容器标识，异步请求的数据 append 的节点
必选项：是
类型：字符串
取值范围：无
单位：无
默认值：无

.mip-infinitescroll-loading
说明：提示信息容器标识，异步请求时、请求失败以及请求成功三种状态的提示信息展示的地方
必选项：是
类型：字符串
取值范围：无
单位：无
默认值：无

h4 class="text-primary"> 参数配置<

rn
说明：results number,需要显示的结果总数量
必选项：否
类型：整数
取值范围：无
单位：无
默认值：20

prn
说明：page result number, 每次请求所请求的数据条数
必选项：否
类型：整数
取值范围：无
单位：无
默认值：6

pn
说明：page number, 每次请求所请求的数据条数
必选项：否
类型：整数
取值范围：无
单位：无
默认值：6

pnName
说明：翻页关键字
必选项：否
类型：字符串
取值范围：无
单位：无
默认值：pn

bufferHeightPx
说明：缓冲高度, 距离底部一定高度时提前请求数据
必选项：否
类型：整数
取值范围：无
单位：无
默认值：10

loadingHtml
说明：loading时提示文案
必选项：否
类型：字符串
取值范围：无
单位：无
默认值：加载中...

loadFailHtml
说明：加载失败时提示文案
必选项：否
类型：字符串
取值范围：无
单位：无
默认值：加载失败

loadOverHtml
说明：加载完毕时提示文案
必选项：否
类型：字符串
取值范围：无
单位：无
默认值：加载完毕

h4 class="text-primary"> 注意事项<

1、异步请求接口必须是 https
2、异步请求接口需要规范 callback 为 'callback'
3、接口返回的数据格式需要是如下格式：

{
    status: 0, 
    data: { 
        items: []
    }
}
 
  - status 0 表示请求成功
  - items: [] 是需要渲染的数据