年底 网站备案,成都龙泉工程建设有限公司网站,flash网站轮播广告怎么做,大连ui设计写在前面
无限滚动技术#xff08;又叫做无限下拉技术#xff09;被广泛应用于新闻类#xff0c;图片预览类网站。对用户来讲#xff0c;使用无限滚动的页面有源源不断的信息可以预览#xff0c;增加用户在页面的停留时长。技术上原理也很简单#xff0c;在页面加载时加…写在前面
无限滚动技术又叫做无限下拉技术被广泛应用于新闻类图片预览类网站。对用户来讲使用无限滚动的页面有源源不断的信息可以预览增加用户在页面的停留时长。技术上原理也很简单在页面加载时加载一部分内容当用户浏览到底部时想后端请求更多内容显示在页面上。因此继 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[typeapplication/json] 子节点非必选项 script typeapplication/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 mipheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width,minimum-scale1,initial-scale1link relstylesheet typetext/css hrefhttps://c.mipcdn.com/static/v1/mip.css!--canonical 中的链接填写对应的非 mip 页地址--link relcanonical hrefhttps://www.mipengine.org/test_xxx.htmltitleHello MIP/titlestyle mip-custom/style/headbodyHello MIP!mip-infinitescroll data-srchttps://your/ajax/api templatemyTemplatescript typeapplication/json{rn: 15,prn: 3,pn: 1,pnName: pn,bufferHeightPx: 40,loadingHtml: loading,loadFailHtml: failed,loadOverHtml: over!}/scripttemplate typemip-mustache idmyTemplatelimip-imglayoutresponsivewidth600height120src{{img}}/mip-imgp 第{{number}}张图 /p/li/templatediv classmip-infinitescroll-results/divdiv classmip-infinitescroll-loading/div/mip-infinitescrollscript srchttps://c.mipcdn.com/static/v1/mip.js/scriptscript srchttp://c.mipcdn.com/static/v1/mip-infinitescroll/mip-infinitescroll.js/scriptscript srchttp://c.mipcdn.com/static/v1/mip-mustache/mip-mustache.js/script/body
/html
