手机端使用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. 警告: The APR based Apache Tomcat Native library failed to load.

    警告: The APR based Apache Tomcat Native library failed to load. The error reported was [C:\apache-tom ...

  2. NEFU 84

    其实同POJ 1061 #include <iostream> #include <cstdio> #include <cstring> #include < ...

  3. NOIP2012 同余方程 题解

    描写叙述 求关于x的同余方程ax ≡ 1 (mod b)的最小正整数解. 格式 输入格式 输入仅仅有一行,包括两个正整数a, b,用一个空格隔开. 输出格式 输出仅仅有一行,包括一个正整数x0.即最小 ...

  4. Android 四大组件学习之BroadcastReceiver四

    本节学习系统中特殊的广播接收者. 我们前面几节不是说了,当广播接受者一旦注冊到系统中,当系统发送的广播和你注冊的广播的action匹配时,系统就会启动广播接收者所在的进程.除非用户手动停止广播接收者所 ...

  5. OpenCV+海康威视摄像头的实时读取

    OpenCV+海康威视摄像头的实时读取 本文由 @lonelyrains出品.转载请注明出处. 文章链接: http://blog.csdn.net/lonelyrains/article/detai ...

  6. &lt;LeetCode OJ&gt; 100. Same Tree

    100. Same Tree Total Accepted: 100129 Total Submissions: 236623 Difficulty: Easy Given two binary tr ...

  7. BZOJ 2124: 等差子序列 线段树维护hash

    2124: 等差子序列 Description 给一个1到N的排列{Ai},询问是否存在1<=p1=3),使得Ap1,Ap2,Ap3,…ApLen是一个等差序列. Input 输入的第一行包含一 ...

  8. UVA 11987 Almost Union-Find 并查集单点修改

                                     Almost Union-Find I hope you know the beautiful Union-Find structur ...

  9. UESTC--1271--Search gold(贪心)

    Search gold Time Limit: 1000MS   Memory Limit: 65535KB   64bit IO Format: %lld & %llu Submit Sta ...

  10. Linux操作系统下Oracle主要监控工具介绍

    Oracle监控包括有效且完全地监控Oracle数据库的性能.可用性和使用率等统计量,还包括即时的错误通知和纠正措施,并提供全面的报表和图表.本文中主要介绍几种Linux操作系统下Oracle主要监控 ...