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