手机端使用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. 参数化取值策略Sequential

    1.Sequential+Each iteration(顺序方式+每次迭代更新取值),设置Run—Logic中action循环迭代11次,并运行以上脚本,结果如下:     2.Sequential+ ...

  2. BA-siemens-TX-IO模块照片

    西门子楼宇自控用到的P1模块是这样的 TX-16D模块是这样的 TX-8X模块是这样的: TX-6R模块是这样的: TX-IO总线连接模块( 此模块供电和通讯加起来共需三芯线):

  3. rails create方法ActiveModel::ForbiddenAttribute的问题

    rails create方法ActiveModel::ForbiddenAttribute的问题 def create @ad = Ad.new(ad_params) @ad.save end pri ...

  4. MySQL 5.7.10最新版本号源码安装具体过程

    ,重置密码 利用mysqladmin重置密码 [root@wgq_idc_mon_1_12 mysql5710]#./bin/mysqladmin -h localhost -uroot passwo ...

  5. PHP中出现Notice: Undefined index的三种解决办法

    前一段做的一个PHP程序在服务器运行正常,被别人拿到本机测试的时候总是出现“Notice: Undefined index:”这样的警告,这只是一个因为PHP版本不同而产生的警告(NOTICE或者WA ...

  6. Spark SQL概念学习系列之性能调优

    不多说,直接上干货! 性能调优 Caching Data In Memory Spark SQL可以通过调用sqlContext.cacheTable("tableName") 或 ...

  7. java实现简单回文算法

    算法要求 编写一个程序,判断一个字符串是否为"回文".回文串:字符串字符从前往后与从后往前一致(中心对称). 算法思路 首先将字符串等分左右两块,然后依次对称比较每一对字符是否相同 ...

  8. Servlet基础（二）

    1.什么是Servlet   java类,提供web形式的访问   servlet就是按照javaee中servlet规范所编写的java类   能够被浏览器通过URL形式访问到 2.怎么在javae ...

  9. RecyclerView的刷新和加载更多

    1.RecyclerView :出现也不知道多久了,没怎么使用过,上次写的笔记乱七八糟的,再次仔细的整理下.   使用需加入依赖  compile 'com.android.support:recyc ...

  10. Projective Texture Mapping - 投影纹理

    昨天导师让写一个投影纹理,将一个相机渲染的图片的一部分投影到另外一个相机里面,目的是无缝的拼接. 投影纹理就和shadow map一样,都是将片元转换到另外一个相机/光源坐标系下,投影后找到对应的纹素 ...