1.一般情况下使用官网给个demo就可以了,如下:

var loading = false;  //状态标记
$(document.body).infinite().on("infinite", function() {
if(loading) return;
loading = true;
setTimeout(function() {
$("#list").append("<p> 我是新加载的内容 </p>");
loading = false;
}, 1500); //模拟延迟
});
2.但是遇到复杂点的页面,可能滚动条都没加载出来。那可能要修改下样式,如:
<div class="infinite" style="height:100%;overflow:auto;" id="listwrap"></div>
$("#listwrap").infinite().on("infinite", function() {})

附加大神写的demo
链接:https://www.cnblogs.com/lemonmoney/p/7987993.html
 

jq weui 滚动加载的坑的更多相关文章

  1. WEUI滚动加载

    var row = 6, page = 1; var loading = false; //状态标记 $(document.body).infinite().on("infinite&quo ...

  2. Jquery WEUI 滚动加载(infinite)不触发

    源代码:(1.0.1版本) Infinite.prototype.scroll = function() { var container = this.container; var offset = ...

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

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

  4. jQuery WeUI 组件下拉刷新和滚动加载的实现

    最近在做手机版使用到了下拉刷新和滚动加载,记录一下实现过程: 一.引入文件 ? 1 2 3 4 <link rel="stylesheet" href="Conte ...

  5. jquery weui ajax滚动加载更多

    手机端使用jquery weui制作ajax滚动加载更多. 演示地址:http://wx.cnkfk.com/nuol/static/fpage.html 代码: <!DOCTYPE html& ...

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

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

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

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

  8. HTML5商城开发一 楼层滚动加载数据

    对于楼层加载在以前只是个想法,从来没实现过,刚好项目中碰到,再此总结一下 场景:HTML5,局部商品列表信息滚动(局部滚动条) 1.通过jq设置subCategoryScroll的高度为屏幕显示高度( ...

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

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

随机推荐

  1. spring+mybatis多数据源,动态切换

    有时我们项目中需要配置多个数据源,不同的业务使用的数据库不同 实现思路:配置多个dataSource ,再配置多个sqlSessionFactory,和dataSource一一对应.重写SqlSess ...

  2. Win10升级.NET Framework 3.5或2.0遇到错误0x800f081f

    具体方法如下: 1.将WIN10安装光盘ISO文件加载到虚拟光驱中. 2.WIN键+R键一起按,输入CMD后回车. 3.在CMD的命令行窗口里输入: cd C:Windowssystem32 跳转到s ...

  3. select version();desc mysql.user;

    D:\wamp64\wamp\bin\mysql\mysql5.6.17\bin>mysql -hgoDev -uroot -ppasswordWarning: Using a password ...

  4. ElasticSearch(八)关于document的一些知识点

    先查看一条数据: GET /ecommerce/product/5 { "_index" : "ecommerce", "_type" : ...

  5. sendevent是使用

    按下: sendevent /dev/input/event4 1 254 1 sendevent /dev/input/event4 0 0 0 松开: sendevent /dev/input/e ...

  6. MySQL学习笔记(一)——数据库基础

    自己上大学时也学习过数据库,做开发时也用到过,但是做界面开发对于数据库的使用相对来说是比较简单的,大学时系统学习的数据库也还给老师了,在测试工作中也只是用到了一些基础sql,增删改查这一类的,但是自己 ...

  7. WebDriver API——浏览器控制暨如何学习webdriver API

    在测试过程中我们可能需要对浏览器进行控制,大小控制啊,刷新页面啊,前进后退等等,最常用的两个接口是window和Navigation. 我们最常用的就是这4个,那么你是否感兴趣它们后面是什么,它们是怎 ...

  8. Springboot框架中request.getInputStream()获取不到上传的文件流

    Springboot框架中用下面的代码,使用request.getInputStream()获取不到上传的文件流 @PostMapping("/upload_img") publi ...

  9. 【原】Oracle 11.2.0.1 64bit for RHEL6.0 Server x86_64 静默安装

    作者:david_zhang@sh [转载时请以超链接形式标明文章] 链接:http://www.cnblogs.com/david-zhang-index/p/4182469.html 本文适用Or ...

  10. android项目源码

    [置顶] Android精品开源项目整理_V20140221(持续更新中..) 让我们回顾下2013年有哪些精品资源:Android精品开源项目整理_V20131115(持续更新中..) 引言:   ...