<script type="text/javascript">
$(window).scroll(function() {
//已经滚动到上面的页面高度
var sl_top = $(this).scrollTop();
//页面高度
var dm_Height = $(document).height();
//浏览器窗口高度
var wd_Height = $(this).height();
//此处是滚动条到底部时候触发的事件,在这里写要加载的数据,或者是拉动滚动条的操作
if ($('#J_loadingData').css('display') == "none") {
if (dm_Height == parseInt(sl_top + wd_Height)) {
$('#J_loadingData').show();
setTimeout(function() {
ajaxData();
}, 3000)
}
}
});
//请求数据
function ajaxData() {
$.get('data/index.json', function(resp) {
if (resp.code == 1) {
$('#J_loadingData').hide();
var liHTML = '';
$.each(resp.data.commodityList, function() {
liHTML += '< a href=" ">' +
'<li>' +
'<div class="left-picture">' +
'< img src="' + this.commodityImg + '" />' +
'</div>' +
'<div class="right-info">' +
'<span class="commodity-title">' + this.commodityInfo + '</span>' +
'</div>' +
'</li>' +
'</ a>';
})
$('.commodity-list').append(liHTML);
}
})
}
</script>

JQuery代码实现上拉加载(不使用插件)的更多相关文章

  1. jquery 和 mui 上拉加载

    jquery: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <m ...

  2. 移动端下拉刷新上拉加载-mescroll.js插件

    最近无意间看到有这么一个上拉刷新下拉加载的插件 -- mescroll.js,个人感觉挺好用的,官网地址是:http://www.mescroll.com 然后我就看了一下文档,简单的写了一个小dem ...

  3. 用jquery写一个上拉加载

    /*可加载页面吗*/function canLoadMore() { return $('.loadin').length < 1;}/*移除正在加载字样*/function removeMor ...

  4. 【前端】上拉加载更多dropload.min.js的使用

    代码如下:入职代码修改接口及html为自己的即可(下面主要展示js部分) <!DOCTYPE html><html> <head> <meta charset ...

  5. 基于SwiperJs的H5/移动端下拉刷新上拉加载更多的效果

    最早时,公司的H5项目中曾用过点击一个"加载更多"的DOM元素来实现分页的功能,后来又用过网上有人写的一个上拉加载更多的插件,那个插件是页面将要滚动到底部时就自动请求数据并插入到页 ...

  6. 基于SwiperJs的H5/移动端下拉刷新上拉加载更多

    最早时,公司的H5项目中曾用过点击一个"加载更多"的DOM元素来实现分页的功能,后来又用过网上有人写的一个上拉加载更多的插件,那个插件是页面将要滚动到底部时就自动请求数据并插入到页 ...

  7. vux-scroller实现移动端上拉加载功能

    本文将讲述vue-cli+vux-scroller实现移动端的上拉加载功能: 纠错声明:网上查阅资料看到很多人都将vux和vuex弄混,在这里我们先解释一下,vuex是vue框架自带的组件,是数据状态 ...

  8. 使用jquery结合ajax做下拉刷新页面,上拉加载页面,俗称分页

    jquery结合iscroll.js做下拉刷新页面,上拉加载页面 先上代码,里面都有注释这就不一一说明了 <!DOCTYPE html> <html lang="en&qu ...

  9. jQuery上拉加载更多

    <header id="header">首 页</header> <section id="main"> <ul id ...

随机推荐

  1. SetCooperativeLevel函数介绍(设置协作等级)

    函数声明 function SetCooperativeLevel(hWnd: HWND; dwFlags: DWORD): HResult; stdcall; 参数介绍 hWnd        Di ...

  2. PHPmysqli的 预处理执行插入语句

    预编译在mysql端 预编译可以自动防止sql注入攻击 <?php //预编译技术 //1.创建一个mysqli对象 //2.创建myslqi预编译对象 $mysqli=); $mysqli-& ...

  3. eclipse中的System.getProperty("user.dir")

    eclipse中的System.getProperty("user.dir") 1.在Java Application中,上述中的获取的是Java项目的路径 (1)运行源码 /** ...

  4. 使用NPOI导入导出标准Excel

    尝试过很多Excel导入导出方法,都不太理想,无意中逛到oschina时,发现了NPOI,无需Office COM组件且不依赖Office,顿时惊为天人,怀着无比激动的心情写下此文. 曾使用过的方法 ...

  5. GitHub 错误解决

    1. The file will have its original line endings in your working directory. git config --global core. ...

  6. C++遍历二维数组的四种方法

    #include <iostream> using std::cin; using std::cout; using std::endl; using std::string; using ...

  7. 手机端仿ios的单级联动脚本三

    脚本 <script>var weekdayArr=['非公司企业法人','个体工商户','私营独资企业','私营合伙企业','有限责任公司','股份有限责任公司'];var mobile ...

  8. 用Mirror,搞定用户画像

    Mirror产品概述 Mirror是专为金融行业设计的全面用户画像管理系统.该系统基于星环多年来为多个金融企业客户构建用户画像的经验,深入契合业务需求,实现对用户全方位全维度的刻画.Mirror内置银 ...

  9. jtyhon 介绍

    Jython是Python的纯Java实现.她无缝地结合了Java类与Python,使用户能以Python语言的语法编写在Java虚拟机上运行的 软件.它的特点有:与相似的Java程序相比,Jytho ...

  10. 浅析Java 8新特性Method Reference

    什么是方法引用 我们知道了什么是Lambda Expression以及如何使用,那么,Method References又是什么呢?Oracle Java Docs中这样说: They are com ...