jq上滑加载更多
html 结构
<div id="main">
<ul class="order-list" id="list_box">
// li
</ul>
<div id="getmore">
正在加载。。。
</div>
</div>
script部分
var page = 1, //分页码
off_on = false, //分页开关
timers = null; //定时器
var p = 0, t = 0;
//加载数据
var LoadingDataFn = function () {
$("#getmore").show()
var dom = '';
for (var i = 0; i <; i++) {
dom += '<li>'+i+'</li>';
}
$("#getmore").hide() $('#list_box').append(dom);
off_on = true;
}; //初始化, 第一次加载
$(document).ready(function () {
LoadingDataFn();
}); $(window).scroll(function () {
//当时滚动条离底部60px时开始加载下一页的内容
p = $(this).scrollTop(); if (t <= p) {//下滚
//
if (($(window).height() + $(window).scrollTop() + 60) >= $(document).height()) {
clearTimeout(timers);
timers = setTimeout(function () {
page++;
console.log("第" + page + "页");
LoadingDataFn()
}, 300);
}
} else {//上滚
//
}
setTimeout(function () { t = p; }, 0);
});
jq上滑加载更多的更多相关文章
- Android如何定制一个下拉刷新,上滑加载更多的容器
前言 下拉刷新和上滑加载更多,是一种比较常用的列表数据交互方式. android提供了原生的下拉刷新容器 SwipeRefreshLayout,可惜样式不能定制. 于是打算自己实现一个专用的.但是下拉 ...
- vue 上滑加载更多
移动端网页的上滑加载更多,其实就是滑动+分页的实现. <template> <div> <p class="footer-text">--{{f ...
- Android的ListView分页功能(上滑加载更多)
今天主要工作是将之前实现的各种ListView显示全部信息,优化成了每次加载几条数据,然后上滑的时候加载更多,底部显示一个进度条和一个文字提示,然后加载完毕后,将提示信息隐藏. 一边看教学视频一遍敲代 ...
- 移动端web页面上滑加载更多功能
背景介绍: 开发企业微信的一个应用,实现在企业微信中调用自己程序页面,页面加载多模块数据,向下滑加载更多,等等等等,一波三折 然后很早就成功了是这样实现的: html: <div id=&quo ...
- 使用jquery.more.js上滑加载更多
html: <div id="more"> <div class="single_item"> <div class=" ...
- 微信小程序上滑加载更多
onReachBottom: function () { var that = this var limit = that.data.limit var count = that.data.count ...
- APICloud 上滑加载更多
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> ...
- jquery 上滑加载更多
$(document).ready(function() { var totalPage = {$totalPage};//总页数 var page = {$page}; //起始页 var page ...
- 微信小程序 scroll-view 完成上拉加载更多
我们经常在软件客户端上看到这么一个功能,当我们阅读信息浏览到文章的末尾时,通常会加载出更多的信息.比如,我们在简书客户端上浏览推荐文章时,浏览到屏幕的末尾,此时又加载出了另一页的推荐文章,即实现了上拉 ...
随机推荐
- 设置placeholder 颜色
::-webkit-input-placeholder { /* WebKit browsers */ color: rgb(100, 193, 173); } :-moz-placeholder { ...
- 利用CountDownTimer倒计时的简单使用实现
package com.loaderman.countdowntimerdemo; import android.os.Bundle; import android.os.CountDownTimer ...
- linux常用命令(12)head命令
head 与 tail 就像它的名字一样的浅显易懂,它是用来显示开头或结尾某个数量的文字区块,head 用来显示档案的开头至标准输出中,而 tail 想当然尔就是看档案的结尾.1 命令格式head [ ...
- C# Await
每次提到异步我都选择绕开,感觉深不可测,最近打算看看异步,但又不愿意看书,网上找了几个视频看,发现传智播客的老师讲异步都不是很深入,关键的问题一笔带过,倒是把我弄糊涂了,印象最深刻的是那个老师说的一句 ...
- 【Web】[原创]ie6,7中td和img之间有间隙
情形描述 开发工具:VS2010: 浏览器版本:IE6以上,火狐,谷歌: 页面布局设计:Table+Img布局: 项目预览问题:火狐,谷歌,IE8以上未出现问题,IE6,IE7图片之间有间隙. 分析原 ...
- moby、docker-ce与docker-ee的区别
近期研究docker相关技术,发现官网分为moby.docker-ce与docker-ee不同板块,ce和ee版本好理解,但2017年开始又多出个Moby,开始有点凌乱,Google出如下解释,mar ...
- vue中封装swipe组件
<template> <!-- TODO swipe --> <div id="hy-swiper"> <div class=" ...
- yum安装telnet如何开启telnet服务
1.# yum install -y telnet telnet-server xinetd (其中telnet-server是由xinetd管理的,所以得下载xinetd服务) 2.修 ...
- 论文阅读 | Generating Fluent Adversarial Examples for Natural Languages
Generating Fluent Adversarial Examples for Natural Languages ACL 2019 为自然语言生成流畅的对抗样本 摘要 有效地构建自然语言处 ...
- Java小技巧:怎么循环日期?
SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");try{//起始日期Date start = sdf.parse ...