手机网站下拉加载数据js(简单版)
加载内容的地方html
<div class="bgcolor_f0 clearfix">
<div class="recharge">
<ul class="recharge-list">
内容的地方,第一加载输入
{loop $orderlist $order}
<li class="recharge-list-view">
{$order['date']}——站内充值
<span>{$order['money']}</span>
</li>
{/loop}
</ul>
</div>
</div>
<input type="hidden" id="page" value="1"/>//
下拉加载内容的js
$(function(){
$(window).scroll(function(){
var scrollTop = $(this).scrollTop(); //滚动条距离顶部的高度
var scrollHeight = $(document).height(); //当前页面的总高度
var windowHeight = $(this).height(); //当前可视的页面高度
if(scrollTop + windowHeight >= scrollHeight) { //距离顶部+当前高度 >=文档总高度 即代表滑动到底部
var page = parseInt($("#page").val())+1;
$.ajax({
type:'POST',
data:"page="+page,
url:SITEURL+'user/ajax_record_more',
dataType:'json',
success:function(data){
console.log(data.status);
console.log(data.orderlist);
if(data.status=='success'){
var html = '';
$.each(data.orderlist,function(i,row){
html+='<li class="recharge-list-view">'+row['date']+'——站内充值 <span>'+row['money']+'</span></li>';
})
$("#page").val(page);
$(".recharge-list").append(html);
} }
}) } }) })
手机网站下拉加载数据js(简单版)的更多相关文章
- Jquery手机下拉刷新,下拉加载数据
一.Jquery手机下拉刷新,下拉加载数据.附加有源码 <!DOCTYPE html> <html> <head> <title>手机</titl ...
- iscroll5 上拉,下拉 加载数据
我这里的思路是上拉时候只是加载第一页的内容,可根据实际情况修改其中的代码.请勿照搬.样式没怎么调,可以加载gif动画.1.没有数据时候,下拉可以加载数据.2.没有数据时候,点击也可以加载数据.3.其余 ...
- 关于MJRefresh的下拉加载数据bug
当没有更多数据的时候显示NoMoreData 我的理解是先结束刷新再显示没有更多 今天之前一直没发现有问题 贴之前的代码 [self.collectionView reloadData]; [self ...
- 下拉加载dropload.js
使用下拉加载 使用需要引用的css <link rel="stylesheet" href="../dist/dropload.css"> 使用需要 ...
- web移动端下拉加载数据简单实现
//下拉加载在移动端会经常使用,有些小伙伴不清楚一些原理下面就简答的介绍一下 //首先需要监听window的滚动事件,下拉其实就是在监听window滚动事件 var pageNum = 1;//分页第 ...
- iscroll5 版本下的 上拉,下拉 加载数据
上拉时候只是加载第一页的内容,可根据实际情况修改其中的代码. <section id="downwraper" class="nodeBottom bot0 bgf ...
- 手机web下拉加载
//需要 zepto.js支持 var page=0;//当前页 var pages=1;//总页数 var ajax=!1;//是否加载中 Zepto(function($){ $(window). ...
- juqery 下拉加载数据
html 代码 一开始是需要显示的第一页 <div class="hot-product f15 fixed-Width clearfix" id="goods ...
- php ajax 下拉加载数据
视图 <html> <head> <title>健康知识</title> <script type="text/javascript&q ...
随机推荐
- Java中面向对象三大特性之——多态
多态的概述: 多态是继封装.继承之后,面向对象的第三大特性. 生活中,比如跑的动作,小猫.小狗和大象,跑起来是不一样的.再比如飞的动作,昆虫.鸟类和飞机,飞起来也是不一样的.可见,同一行为,通过不同 ...
- 报错:command not found
linux中如果是最小化安装的系统,执行命令的时候很多会出现没找到命令 [root@localhost ~]# mtr -bash: mtr: command not found [root@loca ...
- Nginx +tomcat 实现负载均衡集群
一. 工具 nginx-1.8.0 apache-tomcat-6.0.33 二. 目标 实现高性能负载均衡的Tomcat集群: 三. 步骤 1.首先下载Nginx ...
- JavaScript控制iframe中元素的样式
//根据ID获取要操控元素 var deptObjs=document.getElementById("IFRAMEID").contentWindow.document.getE ...
- 小白两篇博客熟练操作MySQL 之 第二篇
小白两篇博客熟练操作MySQL 之 第二篇 一. 视图 视图是一个虚拟表,其本质是根据SQL语句获取动态的数据集,并为其命名,用户使用时只需使用名称即可获取结果集, 并可以将其当做表来使用. s ...
- 3.1 一个简单的Java应用程序
如下一个最简单的应用程序,它将只发送一条消息到控制台窗口中: package myjavapp; public class FirstSample { public stati ...
- 《AlwaysRun!》第八次团队作业:Alpha冲刺 第二天
项目 内容 这个作业属于哪个课程 老师链接 这个作业的要求在哪里 实验十二 团队作业8:软件测试与Alpha冲刺 团队名称 Always Run! 作业学习目标 (1)掌握软件测试基础技术. ( ...
- Huawei-R&S-网络工程师实验笔记20190609-VLAN划分综合(Hybrid端口)
>Huawei-R&S-网络工程师实验笔记20190609-VLAN划分综合(Hybrid端口) >>实验开始,先上拓扑图参考: >>>实验目标:分别实现主 ...
- [cf 599C] Day at the Beach
题意:有n个数,将其分组使整个数列排序后每组中的数仍在该组中,求最多的分组数. 代码很易懂 #include <iostream> #include <algorithm> # ...
- 在ANGULAR的SERVICE中,哪种才是最基本的实现?(Provider)
今天刚好看到这一节. 节选一下,稍后,实操完成之后,会补上所有代码 Sometimes, it might be interesting to create configurable services ...