MIP个性化组件mip-infinitescroll 无限滚动

文章目录[隐藏]
标题 内容
类型 通用
支持布局 responsive,fixed-height,fill,container,fixed
所需脚本 https://mipcache.bdstatic.com/static/v1/mip-infinitescroll/mip-infinitescroll.js
https://mipcache.bdstatic.com/static/v1/mip-mustache/mip-mustache.js

示例

基本用法

<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: [] 是需要渲染的数据

发布日期:

所属分类: 网站运营 SEO 标签: