超酷的 mip-infinitescroll 无限滚动(无限下拉)

无限滚动(又叫做无限下拉)技术被广泛应用于新闻类,图片预览类网站。对用户来讲,使用无限滚动的页面有源源不断的信息可以预览,增加用户在页面的停留时长。技术上原理也很简单,在页面加载时加载一部分内容,当用户浏览到底部时想后端请求更多内容,显示在页面上。因此,继 mip-list 列表组件之后,为提升用户体验,开发了 mip-infinitescroll 无限滚动组件。

简介

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

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

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

示例

如下是 mip-infinitescroll 的一个效果展示,可以看到在滑动页面的过程中,页面底部的提示信息是loading,当全部数据加载完毕,页面底部的提示信息展现为over!

超酷的 mip-infinitescroll 无限滚动(无限下拉) MIP教程

属性及子节点

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

  • data-src 属性(必选项)

    是异步请求数据的接口,需要支持 https;接口 callback 需要设置为 'callback';异步接口返回的数据需要满足如下格式:


{

    "statsu": 0,

     "data": {

         "items":[]

     }

}


    • status 0 表示请求成功

    • 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 提问。