mip-infinitescroll 无限滚动

当用户滚动到页面底部时，异步加载更多数据。适用于信息推荐。

标题 内容
类型 通用
支持布局 responsive, fixed-height, fill, container, fixed
所需脚本 https://c.mipcdn.com/static/v1/mip-infinitescroll/mip-infinitescroll.js
https://c.mipcdn.com/static/v1/mip-mustache/mip-mustache.js

示例

最简单用法

异步获取 number 等数据，插入页面。

  • data-src 填写 HTTPS 异步请求数据接口（仅支持 JSONP 请求）。
  • 接口数据返回示例见文档下方正常数据示例。
  1. <mip-infinitescroll data-src="xxx">
  2.     <template type="mip-mustache">
  3.         <li>
  4.             <p>序号{{number}} :{{title}}</p>
  5.             <mip-img src="{{img}}"
  6.                 layout="responsive" width="100" height="100">
  7.         </li>
  8.     </template>
  9.     <div class="mip-infinitescroll-results"></div>
  10.     <div class="bg">
  11.         <div class="mip-infinitescroll-loading"></div>
  12.     </div>
  13. </mip-infinitescroll>

根据返回值判断请求结束

如果数据量未知，可以填写 rn=”Infinity“， 加载完所有数据后，服务端返回空数据自动停止请求。接口数据返回示例见文档下方空数据示例。

[warning] 由于 JSON.parse 不能解析 Infinity(number)，配置需要写成字符串形式 Infinity。

  1. <mip-infinitescroll data-src="xxx">
  2.     <script type="application/json">
  3.         {
  4.             "rn": "Infinity"
  5.         }
  6.     </script>
  7.     <template type="mip-mustache">
  8.         <li>
  9.             <p>序号{{number}}: {{title}}</p>
  10.             <mip-img src="{{img}}"
  11.                 layout="responsive" width="100" height="100">
  12.         </li>
  13.     </template>
  14.     <div class="mip-infinitescroll-results"></div>
  15.     <div class="bg">
  16.         <div class="mip-infinitescroll-loading"></div>
  17.     </div>
  18. </mip-infinitescroll>

自定义更多配置

rn, prn, timeout, loadingHtml, template 等参数可以配置，可选项参考下文“参数配置”。

  1. <mip-infinitescroll data-src="xxx" template="myTemplate">
  2.     <script type="application/json">
  3.     {
  4.         "rn": 40,
  5.         "pn": 1,
  6.         "prn": 6,
  7.         "pnName": "pn",
  8.         "bufferHeightPx": 40,
  9.         "timeout": 5000,
  10.         "loadingHtml": "更多数据正在路上",
  11.         "loadFailHtml": "数据加载失败啦",
  12.         "loadOverHtml": "没有数据了哦"
  13.     }
  14.     </script>
  15.     <template type="mip-mustache" id="myTemplate">
  16.         <li>
  17.             <mip-img src="{{img}}"
  18.                 layout="responsive" width="100" height="100">
  19.             </mip-img>
  20.             <p>序号:{{number}}</p>
  21.         </li>
  22.     </template>
  23.     <div class="mip-infinitescroll-results"></div>
  24.     <div class="bg">
  25.         <div class="mip-infinitescroll-loading"></div>
  26.     </div>
  27. </mip-infinitescroll>

属性

data-src

说明：异步请求数据接口（仅支持 JSONP 请求）
必选项：是
类型：字符串
取值范围：无
单位：无
默认值：无

template

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

参数配置

rn

说明：results number，需要显示的结果总数量
类型：整数，”Infinity“ 字符串
必选项：否
取值范围：如果填写整数 n，则只会取 n 条数据。如果填写 “Infinity”，则无限加载数据，直到后端没有数据返回
单位：无
默认值：20

pn

说明：page number，请求第几页
必选项：否
类型：整数
单位：无
默认值：1

prn

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

pnName

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

bufferHeightPx

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

loadingHtml

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

loadFailHtml

说明：加载失败时提示文案，当异步请求超时或失败时触发
必选项：否
类型：字符串
取值范围：无
单位：无
默认值：加载失败

loadOverHtml

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

timeout

说明：fetch-jsonp 请求的超时时间
必选项：否
类型：整数
取值范围：无
单位：ms
默认值：5000

内部DOM说明

class="mip-infinitescroll-results"

结果容器 DOM，初始为空。当数据渲染后，作为子节点插入结果容器。

class="mip-infinitescroll-loading"

“加载中”文字容器 DOM，初始为空。当请求发出后，文字容器显示 loadingHtml 内容，请求返回后文字容器消失。当请求超时或请求失败时，文字容器显示 loadFailHtml。

注意事项

  • 异步请求接口必须是 HTTPS
  • 异步请求接口需要规范 callback 为 'callback'
  • 接口返回的数据格式需要是如下格式：
  1. {
  2.     "status": 0, 
  3.     "data": { 
  4.         "items": [{}, {}]
  5.     }
  6. }
  • status: 0 表示请求成功。
  • items: 是需要渲染的数据。

异步接口示例

正常数据示例

  1. {
  2.     "status": 0,
  3.     "data":
  4.     {
  5.         "items": [
  6.         {
  7.             "title": "风信子",
  8.             "img": "https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=3495450057,3472067227&fm=5",
  9.             "number": 1
  10.         },
  11.         {
  12.             "title": "紫罗兰",
  13.             "img": "https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=3903672296,3890938056&fm=5",
  14.             "number": 2
  15.         },
  16.         {
  17.             "title": "梅花",
  18.             "img": "https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=1564909352,2801480363&fm=5",
  19.             "number": 3
  20.         },
  21.         {
  22.             "title": "茉莉花",
  23.             "img": "https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=3761083504,3769519560&fm=5",
  24.             "number": 4
  25.         },
  26.         {
  27.             "title": "栀子花",
  28.             "img": "https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=3554982299,3562031081&fm=5",
  29.             "number": 5
  30.         },
  31.         {
  32.             "title": "桃花",
  33.             "img": "https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=2475781023,3185445088&fm=5",
  34.             "number": 6
  35.         }]
  36.     }
  37. }

空数据示例

当不在有数据时，返回如下数据，item 为空数组。

  1. {
  2.     "status": 0, 
  3.     "data": { 
  4.         "items": []
  5.     }
  6. }