【转】超酷的 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-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://c.mipcdn.com/static/v1/mip.css"><!--canonical 中的链接填写对应的非 mip 页地址--><link rel="canonical" href="https://www.mipengine.org/test_xxx.html"><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://c.mipcdn.com/static/v1/mip.js"></script><script src="http://c.mipcdn.com/static/v1/mip-infinitescroll/mip-infinitescroll.js"></script><script src="http://c.mipcdn.com/static/v1/mip-mustache/mip-mustache.js"></script></body>
</html>
【转】超酷的 mip-infinitescroll 无限滚动(无限下拉)相关推荐
- android点击下拉历史记录,uni-app,社交应用中,聊天页面下拉onPullDownRefresh获取历史消息,数据合并之后,滚动到下拉之前的位置,页面看不见闪动,完美解决...
一般下拉之后,拿到数据合并,会默认展示顶部第一条,模仿其他聊天应用,回到下拉之前位置,如果不做处理,可以看见下拉得到的数据,本方法完美解决 有问题可以留言或者加qq445849201讨论,亲测ios和 ...
- python漫画阅读器 漫画网站只能左右翻页,没法上下滚动连续下拉式观看且广告多体验差?因涉及“版权不明”, 审核未通过
原博文python漫画阅读器 漫画网站只能左右翻页,没法上下滚动连续下拉式观看且广告多体验差?因涉及"版权不明", 审核未通过 (偶尔更新常来看看啊)2022.1.18更新 改为通 ...
- 小程序:区域滚动、下拉刷新、上拉加载更多
一.简介 开发环境:小程序.uniapp 实现功能:列表页面实现,区域滚动.下拉刷新.上拉加载更多,效果如图: 正常: 下拉刷新: 上拉加载: 二.实现 2.1.代码 <scroll-view ...
- h5 ios 滚动到底部_分享iOS平台使用H5原生滚动的下拉刷新功能v1.0.0 [不推荐]
上一篇给大家分享了<使用H5原生滚动的上拉加载功能>,但是没有下拉刷新的功能,今天赶快补上. 我们在上一篇中提到,因为iOS下mui中的下拉刷新插件,使用的是自绘的模拟滚动条,不是原生的, ...
- HTML超出部分滚动效果 HTML滚动 HTML下拉 附效果图
QQ技术交流群 173683866 526474645 欢迎加入交流讨论,打广告的一律飞机票 H5 效果图 实现代码 <!DOCTYPE html> <html><hea ...
- angular 实现无限极联动下拉
在项目中有个2层的联动下拉的效果,百度了一下,发现都是在页面上写死了几个select 来实现的,在一些数据结构不一样的时候 就会玩不转了.比如切换到另一个的时候 它下面已经没有下一层结构的时候, 后面 ...
- php excel多级下拉菜单自动匹配,让Excel如程序般酷炫,两步让多级下拉菜单自动匹配内容...
Excel表格如何实现二级下拉菜单的联动 有时候我们需要为表格做下拉菜单,一级的下拉菜单你可能直接用数据验证或者数据有效性就可以实现,那今天转角要教给大家的是有关二级菜单的联动,Office达人可要看 ...
- 好看的html导航栏作品,精选10款超酷的HTML5/CSS3菜单
本文作者html5tricks,转载请注明出处 今天向大家精选了10款超酷的 1.CSS3手风琴菜单 下拉展开带弹性动画 利用CSS3技术可以实现各种各样的网页菜单,我们之前也在CSS3菜单栏目中分享 ...
- 使用 GraphQL 无限滚动
在构建为用户提供一长串信息的应用程序时,例如新闻提要.论坛中的帖子或聊天应用程序中的消息,我们的目标是向用户显示合理数量的信息. 用户开始滚动浏览初始列表后,Web 客户端应立即加载更多内容以继续向用 ...
- (仿头条APP项目)6.点击过的新闻列表文字变灰和下拉刷新与滚动加载新闻数据
文章目录 一.点击过的新闻列表文字变灰 效果图 实现思路 导入ormlite数据库类依赖 利用ormlite创建数据库和表 创建数据库类MyDbHelper 创建数据库中的新闻实体类NewInfo 页 ...
最新文章
- 将.frm、.myd和.myi文件导入mysql数据库中
- c语言infile和outfile用法,C语言文件读写基本操作DEMO
- Windows——完全控制面板(上帝模式)
- 【计算机科学基础】存储程序原理
- jsf tree组件_JSF文本组件–标签,文本字段,文本区域和密码
- faster rcnn论文_论文导读-从Faster-RCNN/Mask RCNN/Cascade-RCNN到HTC
- 河北联通烽火HG680-J机顶盒破解安装教程
- mingw-w64-i686-toolchain
- 单片机程序编写常使用的程序架构
- 近日,软件项目管理高峰论坛成功召开,项目管理平台发布正式亮相……
- 2020年Java集合课堂笔记
- thinkphp phpmailer发送邮件
- cad工具快速选择特性里面是空的解决方法
- SuperData:2016年VR行业总产值为27亿美元,表现不如预期
- C++20 barrier
- 在线生成 latex 表格代码
- 每天一练——斐波那契数列前N项之和
- 植物蛋白食品的全球与中国市场2022-2028年:技术、参与者、趋势、市场规模及占有率研究报告
- mysql 表如何分区数据恢复,如何从格式化的分区中恢复数据-万兴恢复专家
- SketchUp 2021 Mac中文版 (草图大师Mac版 支持M1芯片) 完美解决M1电脑打不开问题
热门文章
- android自定义圆圈动画,自定义view实现动画数字圆圈
- 如何更新mysql数据库字段_如何使用MySQL一个表中的字段更新另一个表中字段
- router vue 动态改变url_2020年 vue常见面试问题总结(干货)!
- java自动创建月份_使用Java根据月份动态绘制BarGraph
- php 判断是否文件,php 判断是否一个文件的函数is_file()应用举例
- java为什么不推荐使用stack_栈和队列的面试题Java实现,Stack类继承于Vector这两个类都不推荐使用...
- wxwidget编译安装_wxWidgets的安装编译、相关配置、问题分析处理
- 栈 php 验证格式,表单验证 - 《Biny - 高性能轻量级PHP框架》 - 书栈网 · BookStack...
- java excel条件格式_Java 设置Excel条件格式(高亮条件值、应用单元格值/公式/数据条等类型)...
- HDFS上传文件命令报错org.apache.hadoop.ipc.RemoteException(java.io.IOException)