手机端使用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. CAD教程--嵌入表格

    1.第一步,打开excel复制一下表格 2.第二步,打开CAD,选择编辑->选择性粘贴->autocad图元,左键点击一下图就行了,找找图,放大到适合的比例就行了.

  2. ClientProtocolException

    用httpclient 去訪问页面是会出现org.apache.http.client.ClientProtocolException 我这里出现的原因是在http请求时.请求头缺少user-agen ...

  3. Unity3D - 图形性能优化：优化着色器载入时间

    Unity官方文档之"图形性能优化-优化着色器载入时间"的翻译,E文链接. Optimizing Shader Load Time 优化着色器载入时间 Shaders are sm ...

  4. SQL语法精讲（包括建库、建表、建视图、查询、增加、删除、)

    SQL语法精讲(包括建库.建表.建视图.查询.增加.删除.修改) SQL分类: DDL—数据定义语言(CREATE,ALTER,DROP,DECLARE) DML—数据操纵语言(SELECT,DELE ...

  5. phpstudy配置多个域名

    phpstudy配置多个域名 1.端口配置对应的文件为PHPTutorial\Apache\conf\httpd.conf 直接在这个文件里面搜索localhost就可以搜到上图对应的代码那一块 第一 ...

  6. 移动端H5页面编辑器开发实战--经验技巧篇

    很久前的写的文章了,转载下发到这里 原本地址: https://blog.csdn.net/tech_meizu/article/details/52484775

  7. js-apply call bind 浅析

    call 1.第一个参数指定了this,第二个参数传给this,也就是call前面的函数,作为他的参数第三个参数也一样 指定了this,就是执行环境,greet的this在i里面找 function ...

  8. 开发辅助 | 前端开发工程师必懂的 UI 知识

           移动 UI 设计的世界 ... 1.屏幕尺寸 屏幕大小,指屏幕对角线的长度,而不是屏幕的宽度或高度: 单位为英寸 如 iPhone 7 屏幕尺寸为 4.7 英寸:三星 S6 屏幕尺寸为 ...

  9. 几个月来使用mobx代替redux的一些总结

    遇到的一些小坑 React组件内部想要调用store里的action方法,得如下图,否则不会调用(这个现在看来好像不对,待重新检验) 而不能如下图 组件中调用改变store的action后,状态变化并 ...

  10. 在APP开发设计中，为什么APP开发公司要慎用左右横滑设计？

    移动端屏幕越来越大,但用户对内容量的要求也水涨船高.如何在有限的屏幕内透出更多的内容,是设计师们研究的重点. 常用的内容拓展设计有:Y 方向 List 滑动.Z 方向 3D Touch .入口式内容折 ...