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

CloudwiseAPM 发布于2019-08-20 15:09 / 1261人阅读

摘要：写在前面无限滚动又叫做无限下拉技术被广泛应用于新闻类，图片预览类网站。因此，继列表组件之后，为提升用户体验，开发了无限滚动组件。属性非必选项与模板对应，用来标识所采用的模板，默认取组件子节点中的模板。

写在前面

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

简介

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

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

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

示例

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

属性及子节点

要想在页面中添加一个 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"] 子节点（非必选项）

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

使用

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

写在后面

有任何问题可以到 github issues 提问。

服务器托管超融合服务器无限滚动无限下拉列表 js上拉无限滚动无限的云存储

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/82036.html

设计无限滚动下拉加载，实践高性能页面真谛

摘要：论坛上有过这么一篇热门文章，它从角度分析了无限滚动加载的设计实践。无限滚动加载背后的技术挑战其实比想象中要多不少。整体思路和方案设计我们要实现的页面样例如图，它能够做到无限下拉加载内容。 UX Planet论坛上有过这么一篇热门文章: Infinite Scrolling Best Practices，它从UX角度分析了无限滚动加载的设计实践。无限滚动加载在互联网上到处都有应用：豆瓣...

Hanks10100 2019-08-20 14:39 评论0 收藏0
设计无限滚动下拉加载，实践高性能页面真谛

摘要：论坛上有过这么一篇热门文章，它从角度分析了无限滚动加载的设计实践。无限滚动加载背后的技术挑战其实比想象中要多不少。整体思路和方案设计我们要实现的页面样例如图，它能够做到无限下拉加载内容。 UX Planet论坛上有过这么一篇热门文章: Infinite Scrolling Best Practices，它从UX角度分析了无限滚动加载的设计实践。无限滚动加载在互联网上到处都有应用：豆瓣...

novo 2019-08-01 16:25 评论0 收藏0
vue实现下拉加载根本没那么复杂

摘要：一直不知道上拉加载，下拉刷新是怎么实现的。现在正好有个产品有这样一个需求。我只是需要实现一个下拉加载，不需要其他这么多的功能。看了看其他人的源码，直接撸了起来，实现一个组件。之前缺乏移动端的经验。一直不知道上拉加载，下拉刷新是怎么实现的。现在正好有个产品有这样一个需求。想了一会没有思路。就去找插件。啥vue-infinite-scroll，vue-virtual-scroll-lis...

wh469012917 2019-08-26 10:44 评论0 收藏0
【译】无限滚动加载最佳实践

摘要：优秀无限滚动的五项原则将无限滚动做好，并不是不可能完成的任务。提供为特定项添加书签的可能无限滚动最常见的缺点之一就是，内容出现的时候，没法添加书签。结论无限滚动实现得好的话，可以达到令人难以置信的光滑无缝体验。本文转载自：众成翻译译者：文蔺链接：http://www.zcfy.cc/article/673原文：https://uxplanet.org/infinite-scrolli...

Sunxb 2019-08-19 18:37 评论0 收藏0