一、上下拉新,下拉加载
加载 上下
2023-09-11 14:19:04 时间
一、上下拉新,下拉加载
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui"> <meta charset="utf-8" /> <title>下拉刷新例子</title> <link href="http://www.itxst.com/package/minirefresh2/minirefresh.css" rel="stylesheet" /> <script src="http://www.itxst.com/package/minirefresh2/minirefresh.js"></script> <script src="http://www.itxst.com/js/jquery.js"></script> <style> .list { width: 80%; margin-top: 10px; margin-left: auto; margin-right: auto; background-color: #f1f1f1; border: solid 1px #ddd; border-radius: 3px; } </style> </head> <body> <div id="mrefresh" class="minirefresh-wrap"> <div class="minirefresh-scroll"> <!-- 这里放你要被下拉的区域 --> <div class="list"> <ul> <li>网站www.itxst.com</li> <li>网站www.github.com</li> <li>网站内容11111</li> <li>网站内容11111</li> <li>网站内容11111</li> <li>网站内容11111</li> <li>网站内容11111</li> <li>网站内容11111</li> <li>网站www.itxst.com</li> <li>网站www.github.com</li> <li>网站内容11111</li> <li>网站内容11111</li> <li>网站内容11111</li> <li>网站内容11111</li> <li>网站内容11111</li> <li>网站内容11111</li> <li>网站www.itxst.com</li> <li>网站www.github.com</li> <li>网站内容11111</li> <li>网站内容11111</li> <li>网站内容11111</li> <li>网站内容11111</li> <li>网站内容11111</li> <li>网站内容11111</li> </ul> </div> </div> </div> <script> var mRefresh = new MiniRefresh({ container: '#mrefresh', //这里是插件的容器ID down: { isAuto: true, //打开页后自动执行callback里的方法,如getData successAnim: { isEnable: true },//isEnable true可以看到下拉动画 false 没有动画 offset:75,//触发下拉的阈值,当下拉距离大于这个阈值后,在松开时会触发下拉刷新,重要比如你自己的网页顶部有给固定的toolbar则需要用到这个配置 dampRateBegin:1, //阻尼系数,下拉小于offset时的阻尼系数,值越接近0,高度变化越小,表现为越往下越难拉,默认值就行 dampRate:0.3, callback: function () { // 下拉后的回调事件 getData(); mRefresh.endDownLoading(); } , onCalcel: function () { //下拉到一半,放弃刷新执行的事件 calcelMsg(); } }, up: { isAuto: false, loadFull:{ isEnable:true, delay:1000 }, callback: function () { // 向上拉后的回调事件 getData(); } } }); var pos = 0; function getData() { for (var i = pos; i < pos+ 50; i++) { $(".list ul").append("<li>新数据" + i + "</li>"); } //下拉没有内容 结束动画 pos = pos + 50; if (pos > 100) mRefresh.endUpLoading(true);//数据全部加载完了,再上拉也不会触发up回调事件 else mRefresh.endUpLoading(false); //后台还有数据可加载,用户再次向上滑动还会触发事件 } function calcelMsg() { $(".list ul li").remove(); $(".list ul").append("<li>你放弃了刷新</li>"); } </script> </body> </html>
相关文章
- Unity动态加载和内存管理(三合一)
- 提高网页加载速度
- Spring类加载初始化Bean链路
- 127、Universal-Image-Loader解析(转载)(图片加载)
- Vue.js3: 页面打开前实现图片全部预加载(vue@3.2.33)
- 【第二篇】Volley的使用之加载图片
- MFC Windows 程序设计[148]之图片的加载与拖动
- lazyloads.js懒加载
- iOS swift navigationBar 导航栏渐变透明度 上下滑动,左右滑动切换页面,HeaderView悬浮、支持下拉刷新、上拉加载更多
- pytorch加载state_dict()保存的权重
- spring加载bean实例化顺序
- 090:vue+openlayers探究加载能力的极限,100万个点?
- 010:vue+openlayer:加载天地图示例(多种形式)
- leaflet加载含有shp文件的zip,显示shp图形(示例代码026)
- leaflet加载多种形式Esri地图(示例代码025)
- 嵌入式linux开发,开机从TFTP服务器加载linux内核
- TensorFlow加载模型时出错
- tflearn 数据集太大无法加载进内存问题?——使用image_preloader 或者是 hdf5 dataset to deal with that issue
- webpack里CommonJS的require与ES6 的module.exports加载模块有何不同
- 2. linux 驱动编译及加载
- 13. SAP ABAP OData 服务的分页加载数据集的实现(Paging)
- Vue自定义指令实现图片懒加载