超酷的 mip-infinitescroll 无限滚动（无限下拉）

时间 2019-11-09

标签 mip infinitescroll 无限滚动下拉繁體版

原文原文链接

写在前面

无限滚动（又叫作无限下拉）技术被普遍应用于新闻类，图片预览类网站。对用户来说，使用无限滚动的页面有源源不断的信息能够预览，增长用户在页面的停留时长。技术上原理也很简单，在页面加载时加载一部份内容，当用户浏览到底部时想后端请求更多内容，显示在页面上。所以，继 mip-list 列表组件以后，为提高用户体验，开发了 mip-infinitescroll 无限滚动组件。css

简介

mip-infinitescroll 是无限滚动组件，就像它的名字同样，它会监听指定 DOM 节点（固定为 document.body）的滚动事件，当页面滚动到底部的时候，会经过接口去异步请求数据 list，而后根据用户指定的模板渲染成 html， append 到指定的容器中。html

mip-infinitescroll 初始化的时候会先请求一次数据，而后渲染到页面上，此时，若是数据没有铺满屏幕，则会继续请求数据直到铺满屏幕。git

mip-infinitescroll 没有作任何样式限制，开发者能够根据需求对组件在页面中的样式自行完善，也就是说，你想让它长啥样，它就长啥样。github

示例

以下是 mip-infinitescroll 的一个效果展现，能够看到在滑动页面的过程当中，页面底部的提示信息是loading，当所有数据加载完毕，页面底部的提示信息展示为over！ajax

属性及子节点

要想在页面中添加一个 mip-infinitescroll 组件，有一些属性和其子节点是必需要有的，还能够覆盖 mip-infinitescroll 一些配置参数达到更完美的效果。json

data-src 属性（必选项）后端

是异步请求数据的接口，须要支持 https；接口 callback 须要设置为 'callback'；异步接口返回的数据须要知足以下格式：api
```
{
    "statsu": 0,
     "data": {
         "items":[]
     }
}
```
- status 0 表示请求成功app
- items: [] 是须要渲染的数据异步
.mip-infinitescroll-results 子节点（必选项）

是结果容器，每次异步请求数据以后，都会将对应的 html append 到这个容器中。例如给 div 加上 mip-infinitescroll-results class，那么这个div就是结果容器，每次请求的数据渲染后的 html 都会 append 到这个 div 中。
.mip-infinitescroll-loading 子节点（必选项）

提示信息容器，在异步请求时、请求失败以及请求成功三种状态会有三种对应的提示信息。若是不设置则看不到提示信息。例如给 div 加上 mip-infinitescroll-loading class，那么这个div就是提示信息的容器。
template 属性（非必选项）

与模板 id 对应，用来标识所采用的模板，默认取组件子节点中的 template 模板。

script[type="application/json"] 子节点（非必选项）

<script type="application/json">
    {
        "rn": 15,                  // results number 想要显示的结果总数
        "prn": 3,                  // page result number 每页数量
        "pn": 1,                   // page number 页码
        "pnName": "pn",            // 表示页码的变量名
        "bufferHeightPx": 40,      // 缓冲高度, 距离底部必定高度时提早请求数据
        "loadingHtml": "loading",  // loading 状态提示信息
        "loadFailHtml": "failed",  // 请求失败 状态提示信息
        "loadOverHtml": "over!"    // 请求成功 状态提示信息
    }
</script>

MIP 官网文档 mip-infinitescroll 无限滚动中对组件各个参数的说明、使用以及默认值等进行了详细的说明。

使用

首先，构造一个符合 MIP 规范的页面；而后，添加 mip-infinitescroll 组件脚本及 html 标签；一个简单的 demo 就完成了。

<!DOCTYPE html>
<html mip>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
        <link rel="stylesheet" type="text/css" href="https://mipcache.bdstatic.com/static/v1/mip.css">
        <link rel="canonical" href="//www.mipengine.org/">
        <title>Hello MIP</title>
        <style mip-custom>
        </style>
    </head>
    <body>
        Hello MIP!
        <mip-infinitescroll data-src="https://your/ajax/api" template="myTemplate">
            <script type="application/json">
            {
                "rn": 15,
                "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>
        <script src="https://mipcache.bdstatic.com/static/v1/mip.js"></script>
        <script src="http://mipcache.bdstatic.com/static/v1/mip-infinitescroll/mip-infinitescroll.js"></script>
        <script src="http://mipcache.bdstatic.com/static/v1/mip-mustache/mip-mustache.js"></script>
    </body>
</html>

写在后面

有任何问题能够到 github issues 提问。