jquery实现上拉加载下拉刷新

引入dropload插件

需要引入的文件
<script src="js/zepto.min.js"></script>
<script src="js/dist/dropload.min.js"></script>
<link rel="stylesheet" href="js/dist/dropload.css">

<!doctype html>
<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"><meta name="full-screen" content="yes"><meta name="x5-fullscreen" content="true"><title>订单明细</title><link rel="stylesheet" href="css/bootstrap.css" /><link rel="stylesheet" href="css/order.css" /><link rel="stylesheet" href="css/dropload.css"><!--[if lt IE 9]><script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script><script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]--><script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head><body><div class="order_nav"><div class="header"><a class="return_img" href="income.html"><img src="img/firework/ios/return@3x.png"></a><spanclass="h_h">订单明细</span></div><div class="search"><form><span><img src="img/firework/ios/search@3x.png"></span><input type="text" name="search" placeholder="搜索订单号"></form></div><div class="content"><div class="lists"><!-- <div class="box box_lis1"><div class="box_l"><img src="img/firework/ios/img1@3x.png"></div><div class="box_r"><dl><dt><span>床头柜简约现代经济型收纳柜子组装柱状妆</span></dt><dd class="text_1"><strong>￥53</strong>&nbsp&nbsp&nbsp<span>奖励:￥1.32</span></dd><dd class="text_2">订单号:252723008808410657</dd></dl></div><div class="line"><img src="img/firework/ios/line@3x.png"></div><div class="box_p"><p class="p1">2018年11月11日01:47创建</p><p class="p2">2018年11月06日13:05结算</p></div></div>  --></div></div></div><script type="text/javascript">var aInp = document.getElementsByTagName('input')[0];aInp.onclick = function () {aInp.style.textAlign = "left";}</script><script src="js/jquery.min.js"></script><script src="js/dropload.min.js"></script><script>$(function () {var page = -1; // 页数  初始化设置为0// var size = 10; //后台设置每页数据的长度var result = ''; //初始化加载的数据 // droploadvar dropload = $('.content').dropload({scrollArea: window,domUp: {domClass: 'dropload-up',domRefresh: '<div class="dropload-refresh">↓下拉刷新</div>',domUpdate: '<div class="dropload-update">↑释放更新</div>',domLoad: '<div class="dropload-load"><span class="loading"></span>加载中...</div>'},domDown: {domClass: 'dropload-down',domRefresh: '<div class="dropload-refresh">↑上拉加载更多</div>',domLoad: '<div class="dropload-load"><span class="loading"></span>加载中...</div>',domNoData: '<div class="dropload-noData">暂无数据</div>'},// 下拉刷新loadUpFn: function (me) {console.log('下拉刷新')$.ajax({type: 'POST',url: 'https://minih.com/find',dataType: "json",data: {st: 1, //页码},success: function (data) {var result = '';for (var i = 0; i < data.list.length; i++) {result +='<div class="box box_lis1"><div class="box_l"><img src="img/firework/ios/img1@3x.png"></div><div class="box_r"><dl><dt><span>床头柜简约现代经济型收纳柜子组装柱状妆</span></dt><dd class="text_1"><strong>￥53</strong>&nbsp&nbsp&nbsp<span>奖励:￥1.32</span></dd><dd class="text_2">订单号:252723008808410657</dd></dl></div><div class="line"><img src="img/firework/ios/line@3x.png"></div><div class="box_p"><p class="p1">2018年11月11日01:47创建</p><p class="p2">2018年11月06日13:05结算</p></div></div>';}setTimeout(function () {$('.lists').html(result);// 每次数据加载完，必须重置me.resetload();// 重置页数，重新获取loadDownFn的数据page = 1;// 解锁loadDownFn里锁定的情况me.unlock();me.noData(false);}, 1000);},error: function (xhr, type) {alert('Ajax error!');// 即使加载出错，也得重置me.resetload();}});},// 上拉加载loadDownFn: function (me) {console.log('上拉加载')page++;console.log(page);// 拼接HTMLvar result = '';$.ajax({type: 'POST',url: 'https://minih.bnln100.com/mini/jd/find?token=mu_2389f129-463d-4955-88c2-4a701c69a310&key=&deviceId=%2Fmini&partnerId=88888&sign=e2899aafb57f186181dc37520d96c957',dataType: 'json',data: {st: page, //页码},success: function (data) {var arrLen = data.list.length;if (arrLen > 0) {for (var i = 0; i < arrLen; i++) {result +='<div class="box box_lis1"><div class="box_l"><img src="img/firework/ios/img1@3x.png"></div><div class="box_r"><dl><dt><span>床头柜简约现代经济型收纳柜子组装柱状妆</span></dt><dd class="text_1"><strong>￥53</strong>&nbsp&nbsp&nbsp<span>奖励:￥1.32</span></dd><dd class="text_2">订单号:252723008808410657</dd></dl></div><div class="line"><img src="img/firework/ios/line@3x.png"></div><div class="box_p"><p class="p1">2018年11月11日01:47创建</p><p class="p2">2018年11月06日13:05结算</p></div></div>';}$('.lists').append(result);// 每次数据插入，必须重置me.resetload();// 如果没有数据} else {console.log('没有数据')// 锁定  // 无数据me.lock();me.noData(true);me.resetload();}// 为了测试，延迟1秒加载// setTimeout(function () {//   // 插入数据到页面，放到最后面//   $('.lists').append(result);//   // 每次数据插入，必须重置//   me.resetload();// }, 1000);},error: function (xhr, type) {console.log('网络错误')// 即使加载出错，也得重置me.resetload();}});},threshold: 50});});</script>
</body></html>

jquery实现上拉加载下拉刷新相关推荐

php微信小程序向下滑动,微信小程序功能实现：上滑加载下拉刷新
本篇文章给大家带来的内容是关于微信小程序功能实现:上滑加载下拉刷新,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 之前谈到文章列表的数据加载,是一次性全部加载,这样是不友好的.这章介 ...
ionic上拉加载-下拉刷新
ionic上拉加载-下拉刷新 1.上拉加载 <ion-infinite-scroll on-infinite="loadOlderStories()" distance=&q ...
Mint-ui中loadmore(上拉加载下拉刷新)组件在ios中滑动会触发点击事件的解决方法...
bug说明: Mint-ui中loadmore(上拉加载下拉刷新)组件在使用fastclick的情况下 ,在ios设备中滑动会触发点击事件: 解决方法: 我是按需引入,去项目中找到loadmore ...
php mescroll,mescroll.js上拉加载下拉刷新组件使用详解
本文实例为大家分享了上拉加载下拉刷新组件mescroll.js的具体代码,供大家参考,具体内容如下使用注意事项: 1.引入的时候出问题及时看官方给出的解决方案(基本上都必须看): 2.react中一 ...
教你如何使用SwipeRefreshLayout来构建一个上拉加载下拉刷新框架
前言: 基本上所以的移动端应用都有Listview(当然RecyclerView也一样),那必不可少的都会嵌入一个上拉加载下拉刷新的功能.这样能大大的减少用户的流量消耗,同样对于用户也有更好的用户体验 ...
ios 上拉加载下拉刷新
在一款 App应用中有的时候会用到上拉加载下拉刷新的功能,本人觉得SVPullToRefresh很好用(可以用在UIScrollView上,包括UITableview和UICollectionView ...
微信公众号上拉加载下拉刷新
最近再再做一个公众号的项目有需要用到上拉加载,下拉刷新的技术.在网上找了很久,终于找到一个很好用 js 插件,今天我就把这个插件分享给大家,该包可用于App和微信公众号 , 资源下载地址:https: ...
上拉加载下拉刷新了解下
2019独角兽企业重金招聘Python工程师标准>>> 老样子,我们先,哦不,今天我们直接上思路,没有效果图,真的没有我们依旧从界面及逻辑两块进行分析 1.界面上,只分成简单的两块 ...
vue 实现上拉加载下拉刷新（思路贼清晰）
项目需要用到上拉刷新下拉加载所以自己手动实现了一个组件: <template><div class="my-scroll" :class="[scr ...

jquery实现上拉加载下拉刷新

引入dropload插件

jquery实现上拉加载下拉刷新相关推荐

最新文章

热门文章