手机端使用jquery weui制作ajax滚动加载更多。

演示地址：http://wx.cnkfk.com/nuol/static/fpage.html

代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
  6. <title>滚动加载更多</title>
  7. <link rel="stylesheet" href="http://cdn.bootcss.com/weui/1.1.1/style/weui.min.css">
  8. <link rel="stylesheet" href="http://cdn.bootcss.com/jquery-weui/1.0.1/css/jquery-weui.min.css">
  9. <script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
  10. <script src="http://cdn.bootcss.com/jquery-weui/1.0.1/js/jquery-weui.min.js"></script>
  11. </head>
  12. <body>
  13. <div id="list">
  14. </div>
  15. <div class="weui-loadmore">
  16. <i class="weui-loading"></i>
  17. <span class="weui-loadmore__tips">正在加载</span>
  18. </div>
  19. <script>
  20. $(function () {
  21. max=10,page=1;
  22. //进入页面加载
  23. load(page);
  24. //滚动加载更多
  25. var loading = false;  //状态标记
  26. $(document.body).infinite().on("infinite", function() {
  27. if(loading) return;
  28. loading = true;
  29. setTimeout(function() {
  30. page=page+1;
  31. load(page);
  32. loading = false;
  33. }, 1000);   //模拟延迟
  34. });
  35. //ajax加载数据
  36. function load(p) {
  37. var url="http://123.56.119.1:3000/words/search";
  38. var data={"offset":(p-1)*max,"limit":max}
  39. $.get(url,data,function (res) {
  40. if(res.data.length==0||res.data.length==res.num){
  41. //没有数据时
  42. $(document.body).destroyInfinite()
  43. $(".weui-loadmore").html('<div class="weui-loadmore weui-loadmore_line"> <span class="weui-loadmore__tips">暂无数据</span> </div>')
  44. }
  45. for(var i=0;i<res.data.length;i++){
  46. $("#list").append('<a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">'
  47. +'<div class="weui-media-box__hd">'
  48. +'<img class="weui-media-box__thumb" src="http://123.56.119.1:3000/upload/'+res.data[i].image+'">'
  49. +'</div>'
  50. +'<div class="weui-media-box__bd">'
  51. +'<h4 class="weui-media-box__title">'+res.data[i].content+'</h4>'
  52. +'</div>'
  53. +'</a>')
  54. }
  55. })
  56. }
  57. })
  58. </script>
  59. </body>
  60. </html>
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">

    <title>滚动加载更多</title>

    <link rel="stylesheet" href="http://cdn.bootcss.com/weui/1.1.1/style/weui.min.css">

    <link rel="stylesheet" href="http://cdn.bootcss.com/jquery-weui/1.0.1/css/jquery-weui.min.css">

    <script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>

    <script src="http://cdn.bootcss.com/jquery-weui/1.0.1/js/jquery-weui.min.js"></script>

</head>

<body>

<div id="list">  

</div>


<div class="weui-loadmore">


<i class="weui-loading"></i>


<span class="weui-loadmore__tips">正在加载</span>


</div>


<script>


$(function () {


max=10,page=1;


//进入页面加载


load(page);


//滚动加载更多


var loading = false;  //状态标记


$(document.body).infinite().on("infinite", function() {


if(loading) return;


loading = true;


setTimeout(function() {


page=page+1;


load(page);


loading = false;


}, 1000);   //模拟延迟


});


//ajax加载数据


function load(p) {


var url="http://123.56.119.1:3000/words/search";


var data={"offset":(p-1)*max,"limit":max}


$.get(url,data,function (res) {


if(res.data.length0||res.data.lengthres.num){


//没有数据时


$(document.body).destroyInfinite()


$(".weui-loadmore").html('<div class="weui-loadmore weui-loadmore_line"> <span class="weui-loadmore__tips">暂无数据</span> </div>')


}


for(var i=0;i<res.data.length;i++){


$("#list").append('<a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">'


+'<div class="weui-media-box__hd">'


+'<img class="weui-media-box__thumb" src="http://123.56.119.1:3000/upload/'+res.data[i].image+'">'


+'</div>'


+'<div class="weui-media-box__bd">'


+'<h4 class="weui-media-box__title">'+res.data[i].content+'</h4>'


+'</div>'


+'</a>')


}


})


}


})


</script>


</body>


</html>

jquery weui ajax滚动加载更多的更多相关文章

  1. jquery实现下拉加载更多

    下拉加载更多这种原理很容易想明白,但是不自己写一个简单的,老是不踏实,获取什么高度再哪里获取之类的.于是自己简单写了个,就是页面上有几个div,然后当滚动条拉到某个位置的时候,再继续加载div.顺便又 ...

  2. vue 原生添加滚动加载更多

    vue中添加滚动加载更多,因为是单页面所以需要在跳出页面时候销毁滚动,要不会出现错乱.我们在mounted建立滚动,destroyed销毁滚动. mounted () { window.addEven ...

  3. 笔记-VUE滚动加载更多数据

    来源:https://blog.csdn.net/qq_17281881/article/details/87342403 VUE滚动加载更多数据 data() { return { loading: ...

  4. jquery ajax 滚动加载数据

    jquery php 滚动加载数据(文件包 rollingpage) 效果如下: 页面加载时候($function(){ 自动加载第一页数据 }) 设置: var winH = $(window).h ...

  5. weui实现滚动加载的效果

    weui是微信公司提供的一个UI框架,在H5开发中一些组件可以直接使用.weui文档地址:http://www.jqweui.cn/components 使用weui,需要引入weui.css和jqu ...

  6. 基于 Vue.js 的移动端组件库mint-ui实现无限滚动加载更多

    通过多次爬坑,发现了这些监听滚动来加载更多的组件的共同点, 因为这些加载更多的方法是绑定在需要加载更多的内容的元素上的, 所以是进入页面则直接触发一次,当监听到滚动事件之后,继续加载更多, 所以对于无 ...

  7. 记录WEUI中滚动加载的一个BUG

    最近写微信公众号,用到的技术栈是jq+vue的混合开发,采用的UI是移动端比较火的WEUI,在微信开发中应该较广泛.个人看惯了elementUI文档,相对于饿了么组件文档的详细,WEUI的文档还是比较 ...

  8. jQuery的AJax异步加载

    主要用到load()方法以及getScript()方法,具体以一个例子说明: 在现有html文件中加载一个拟好的片段,以及在片段加载完成之前阻止用户进一步操作的弹出框. 首先是现有html代码,无任何 ...

  9. 微信小程序实现滚动加载更多

    1.需要用到的组件和api scroll-view(可滚动视图区域) wx.showToast(OBJECT)显示消息提示窗----显示loading小菊花用的 2.需要用到的属性 3.scrol-v ...

随机推荐

  1. A server is already running. Check tmp/pids/server.pid.

    A server is already running. Check  tmp/pids/server.pid. 把server.pid删除: 学习了: http://stackoverflow.co ...

  2. Android 开源项目android-open-project解析之(二) GridView,ImageView,ProgressBar,TextView

    五.GridView StaggeredGridView 同意非对齐行的GridView,类似Pinterest的瀑布流.而且跟ListView一样自带View缓存,继承自ViewGroup 项目地址 ...

  3. HTML5 格式化方式以及应用

    <b>加粗字体 <big>定义大号字体 <em>定义着重文字 <i>定义斜体字 <small>定义小号字体 <strong>定义 ...

  4. 从Oracle转到Mysql前需了解的50件事

    我本人比较关心的几点: 1. 对子查询的优化表现不佳. 2. 对复杂查询的处理较弱 4. 性能优化工具与度量信息不足 12. 支持 SMP (对称多处理器),但是如果每个处理器超过 4 或 8 个核( ...

  5. JPA实现一对多(OneToMany)关联

    转自:https://blog.csdn.net/qq_32444825/article/details/77084580 1.考试类 @Entity public classExam impleme ...

  6. thinkPHP5 报错session_start(): No session id returned by function解决方法

    这是因为用Redis接管了session状态储存,但是Redis又连接不正常导致的 在服务器上查看Redis运行状态一切正常,set.get也没有问题,最后琢磨了半天才发现是PHPRedis扩展没有安 ...

  7. WPF向系统发送消息 并传递结构体

    场景 :需要开发一个通讯组件 流程为:界面-开启接收服务-通过发送组件发送信息到 其他客户端和服务端 接受服务接收其他客户端发送的消息 需要传递给对应组件或者界面 因此会出现类库重复引用问题.因为采用 ...

  8. usaco No Change, 2013 Nov 不找零（二分查找+状压dp）

    Description 约翰带着 N 头奶牛在超市买东西,现在他们正在排队付钱,排在第 i 个位置的奶牛需要支付 Ci 元.今天说好所有东西都是约翰请客的,但直到付账的时候,约翰才意识到自己没带钱,身 ...

  9. JS装饰器模式

    装饰器模式:在不改变原对象的基础上,通过对其进行包装拓展(添加属性或者方法),保护原有功能的完整性需要条件:原对象,新内容(属性/方法)个人理解:重新实现一下,原对象的方法,在方法内容,先执行原对象的 ...

  10. Android设计模式——单例模式

    1.单例模式就是确保一个类,只有一个实例化对象,而且自行实例化并向整个系统提供这个实例. 2.使用场景: 确保某个类,有且只有一个对象,避免产生对个对象,消耗过多的资源. 2.实现单例模式的重要点: ...