手机端使用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. H3C SecPath U200-S 如何在内网使用外网IP地址访问内网服务器

    H3C SecPath U200-S 如何在内网使用外网IP地址访问内网服务器 ------------------------------------------------------------ ...

  2. 绘图-CAD-改快捷键

    CAD的快捷键应该在左手边,左手不离开键盘,右手不离开鼠标,这样的操作才有效率. arc 圆弧命令原命令是ARC Q 圆(CIRCLE) C 原快捷键C被定义为COPY,Q的形状类似圆,只是多了一个尾 ...

  3. Photon + Unity3D 线上游戏开发 学习笔记(一)

    大家好. 我也是学习Photon + unity3D 的新手 有什么说错的地方大家见谅哈. 我的开发环境是 unity3D 4.1.3  ,   Visual Studio 是2010 版本号的  p ...

  4. linux网络启动报错

    报错信息: shutting down interface eth0: error:device "eth0" (/org/freedsktop/networkMaager/Dev ...

  5. html5开发手机打电话发短信功能,html5的高级开发,html5开发大全,html手机电话短信功能具体解释

    在非常多的手机站点上,有打电话和发短信的功能,对于这些功能是怎样实现的呢.事实上不难,今天我们就用html5来实现他们. 简单的让你大开眼界.HTML5 非常easy写,但创建网页时,您常常须要反复做 ...

  6. asp.net web site中reference的version的autoupdate

    https://stackoverflow.com/questions/833924/visual-studio-stop-auto-update-on-references This is vali ...

  7. docker迁移步骤

    1. 创建快照:docker commit -p 30b8f18f20b4 container-backup (可以通过docker images 查看docker镜像) 2. 镜像保存在本地机器中: ...

  8. SQLSERVER 链接服务器

    1. 执行代码 EXEC sp_addlinkedserver @server='XLZFSqlServer', --链接服务器别名 @srvproduct='', @provider='SQLOLE ...

  9. centos7 usually use

    firewall-cmd --permanent --add-rich-rule 'rule family=ipv4 source address=192.168.22.103 port port=8 ...

  10. Android蓝牙2.0连接以及数据接收发送

    1.加入权限 <uses-feature android:name="android.hardware.bluetooth_le" android:required=&quo ...