手机端 : js设置table内容 加载更多，并头部锁定悬浮
<script src="js/jquery.min.js" type="text/javascript"></script>
<!--上划加载更多 tr-->
<script src="js/dropload.js" type="text/javascript"></script>
<script src="js/khData.js" type="text/javascript"></script>
/**
* dropload
* 西门(http://ons.me/526.html)
* 0.9.0(160215)
*/ ;(function($){
'use strict';
var win = window;
var doc = document;
var $win = $(win);
var $doc = $(doc);
$.fn.dropload = function(options){
return new MyDropLoad(this, options);
};
var MyDropLoad = function(element, options){
var me = this;
me.$element = element;
// 上方是否插入DOM
me.upInsertDOM = false;
// loading状态
me.loading = false;
// 是否锁定
me.isLockUp = false;
me.isLockDown = false;
// 是否有数据
me.isData = true;
me._scrollTop = 0;
me._threshold = 0;
me.init(options);
}; // 初始化
MyDropLoad.prototype.init = function(options){
var me = this;
me.opts = $.extend(true, {}, {
scrollArea : me.$element, // 滑动区域
domUp : { // 上方DOM
domClass : 'dropload-up',
domRefresh : '<div class="dropload-refresh">↓下拉刷新</div>',
domUpdate : '<div class="dropload-update">↑释放更新</div>',
domLoad : '<div class="dropload-load"><span class="loading"></span>加载中...</div>'
},
domDown : { // 下方DOM
domClass : 'dropload-down',
domRefresh : '<div class="dropload-refresh">↑上拉加载更多</div>',
domLoad : '<div class="dropload-load"><span class="loading"></span>加载中...</div>',
domNoData : '<div class="dropload-noData">暂无数据</div>'
},
autoLoad : true, // 自动加载
distance : 50, // 拉动距离
threshold : '', // 提前加载距离
loadUpFn : '', // 上方function
loadDownFn : '' // 下方function
}, options); // 如果加载下方，事先在下方插入DOM
if(me.opts.loadDownFn != ''){
me.$element.append('<div class="'+me.opts.domDown.domClass+'">'+me.opts.domDown.domRefresh+'</div>');
me.$domDown = $('.'+me.opts.domDown.domClass);
} // 计算提前加载距离
if(!!me.$domDown && me.opts.threshold === ''){
// 默认滑到加载区2/3处时加载
me._threshold = Math.floor(me.$domDown.height()*1/3);
}else{
me._threshold = me.opts.threshold;
} // 判断滚动区域
if(me.opts.scrollArea == win){
me.$scrollArea = $win;
// 获取文档高度
me._scrollContentHeight = $doc.height();
// 获取win显示区高度 —— 这里有坑
me._scrollWindowHeight = doc.documentElement.clientHeight;
}else{
me.$scrollArea = me.opts.scrollArea;
me._scrollContentHeight = me.$element[0].scrollHeight;
me._scrollWindowHeight = me.$element.height();
}
fnAutoLoad(me); // 窗口调整
$win.on('resize',function(){
if(me.opts.scrollArea == win){
// 重新获取win显示区高度
me._scrollWindowHeight = win.innerHeight;
}else{
me._scrollWindowHeight = me.$element.height();
}
}); // 绑定触摸
me.$element.on('touchstart',function(e){
if(!me.loading){
fnTouches(e);
fnTouchstart(e, me);
}
});
me.$element.on('touchmove',function(e){
if(!me.loading){
fnTouches(e, me);
fnTouchmove(e, me);
}
});
me.$element.on('touchend',function(){
if(!me.loading){
fnTouchend(me);
}
}); // 加载下方
me.$scrollArea.on('scroll',function(){
me._scrollTop = me.$scrollArea.scrollTop(); // 滚动页面触发加载数据
if(me.opts.loadDownFn != '' && !me.loading && !me.isLockDown && (me._scrollContentHeight - me._threshold) <= (me._scrollWindowHeight + me._scrollTop)){
loadDown(me);
}
});
}; // touches
function fnTouches(e){
if(!e.touches){
e.touches = e.originalEvent.touches;
}
} // touchstart
function fnTouchstart(e, me){
me._startY = e.touches[0].pageY;
// 记住触摸时的scrolltop值
me.touchScrollTop = me.$scrollArea.scrollTop();
} // touchmove
function fnTouchmove(e, me){
me._curY = e.touches[0].pageY;
me._moveY = me._curY - me._startY; if(me._moveY > 0){
me.direction = 'down';
}else if(me._moveY < 0){
me.direction = 'up';
} var _absMoveY = Math.abs(me._moveY); // 加载上方
if(me.opts.loadUpFn != '' && me.touchScrollTop <= 0 && me.direction == 'down' && !me.isLockUp){
e.preventDefault(); me.$domUp = $('.'+me.opts.domUp.domClass);
// 如果加载区没有DOM
if(!me.upInsertDOM){
me.$element.prepend('<div class="'+me.opts.domUp.domClass+'"></div>');
me.upInsertDOM = true;
} fnTransition(me.$domUp,0); // 下拉
if(_absMoveY <= me.opts.distance){
me._offsetY = _absMoveY;
// todo：move时会不断清空、增加dom，有可能影响性能，下同
me.$domUp.html(me.opts.domUp.domRefresh);
// 指定距离 < 下拉距离 < 指定距离*2
}else if(_absMoveY > me.opts.distance && _absMoveY <= me.opts.distance*2){
me._offsetY = me.opts.distance+(_absMoveY-me.opts.distance)*0.5;
me.$domUp.html(me.opts.domUp.domUpdate);
// 下拉距离 > 指定距离*2
}else{
me._offsetY = me.opts.distance+me.opts.distance*0.5+(_absMoveY-me.opts.distance*2)*0.2;
} me.$domUp.css({'height': me._offsetY});
}
} // touchend
function fnTouchend(me){
var _absMoveY = Math.abs(me._moveY);
if(me.opts.loadUpFn != '' && me.touchScrollTop <= 0 && me.direction == 'down' && !me.isLockUp){
fnTransition(me.$domUp,300); if(_absMoveY > me.opts.distance){
me.$domUp.css({'height':me.$domUp.children().height()});
me.$domUp.html(me.opts.domUp.domLoad);
me.loading = true;
me.opts.loadUpFn(me);
}else{
me.$domUp.css({'height':'0'}).on('webkitTransitionEnd mozTransitionEnd transitionend',function(){
me.upInsertDOM = false;
$(this).remove();
});
}
me._moveY = 0;
}
} // 如果文档高度不大于窗口高度，数据较少，自动加载下方数据
function fnAutoLoad(me){
if(me.opts.autoLoad){
if((me._scrollContentHeight - me._threshold) <= me._scrollWindowHeight){
loadDown(me);
}
}
} // 重新获取文档高度
function fnRecoverContentHeight(me){
if(me.opts.scrollArea == win){
me._scrollContentHeight = $doc.height();
}else{
me._scrollContentHeight = me.$element[0].scrollHeight;
}
} // 加载下方
function loadDown(me){
me.direction = 'up';
me.$domDown.html(me.opts.domDown.domLoad);
me.loading = true;
me.opts.loadDownFn(me);
} // 锁定
MyDropLoad.prototype.lock = function(direction){
var me = this;
// 如果不指定方向
if(direction === undefined){
// 如果操作方向向上
if(me.direction == 'up'){
me.isLockDown = true;
// 如果操作方向向下
}else if(me.direction == 'down'){
me.isLockUp = true;
}else{
me.isLockUp = true;
me.isLockDown = true;
}
// 如果指定锁上方
}else if(direction == 'up'){
me.isLockUp = true;
// 如果指定锁下方
}else if(direction == 'down'){
me.isLockDown = true;
// 为了解决DEMO5中tab效果bug，因为滑动到下面，再滑上去点tab，direction=down，所以有bug
me.direction = 'up';
}
}; // 解锁
MyDropLoad.prototype.unlock = function(){
var me = this;
// 简单粗暴解锁
me.isLockUp = false;
me.isLockDown = false;
// 为了解决DEMO5中tab效果bug，因为滑动到下面，再滑上去点tab，direction=down，所以有bug
me.direction = 'up';
}; // 无数据
MyDropLoad.prototype.noData = function(flag){
var me = this;
if(flag === undefined || flag == true){
me.isData = false;
}else if(flag == false){
me.isData = true;
}
}; // 重置
MyDropLoad.prototype.resetload = function(){
var me = this;
if(me.direction == 'down' && me.upInsertDOM){
me.$domUp.css({'height':'0'}).on('webkitTransitionEnd mozTransitionEnd transitionend',function(){
me.loading = false;
me.upInsertDOM = false;
$(this).remove();
fnRecoverContentHeight(me);
});
}else if(me.direction == 'up'){
me.loading = false;
// 如果有数据
if(me.isData){
// 加载区修改样式
me.$domDown.html(me.opts.domDown.domRefresh);
fnRecoverContentHeight(me);
fnAutoLoad(me);
}else{
// 如果没数据
me.$domDown.html(me.opts.domDown.domNoData);
}
}
}; // css过渡
function fnTransition(dom,num){
dom.css({
'-webkit-transition':'all '+num+'ms',
'transition':'all '+num+'ms'
});
}
})(window.Zepto || window.jQuery);
dropload.js
$(function () {
var itemIndex = 0;
var tabLoadEndArray = [false, false, false];
var tabLenghtArray = [28, 15, 47];
var tabScroolTopArray = [0, 0, 0];
// dropload
var dropload = $('.tablemess').dropload({
scrollArea: window,
domDown: {
domClass: 'dropload-down',
domRefresh: '<div class="dropload-refresh">上拉加载更多</div>',
domLoad: '<div class="dropload-load"><span class="loading"></span>加载中...</div>',
domNoData: '<div class="dropload-noData">已无数据</div>'
},
loadDownFn: function (me) {
setTimeout(function () {
if (tabLoadEndArray[itemIndex]) {
me.resetload();
me.lock();
me.noData();
me.resetload();
return;
}
var result = '';
for (var index = 0; index < 10; index++) {
if (tabLenghtArray[itemIndex] > 0) {
tabLenghtArray[itemIndex]--;
} else {
tabLoadEndArray[itemIndex] = true;
break;
}
if (itemIndex == 0) {
result
+= ''
+ ' <tr>'
+ ' <td>12:08:08</td>'
+ ' <td>62</td>'
+ ' <td>35</td>'
+ ' <td>156</td>'
+ ' </tr>';
}
}
$('.table-bordered tbody').eq(itemIndex).append(result);
me.resetload();
}, 500);
}
});
});
khData.js
<div class="padding10 overflowauto tablemess" style="padding-bottom: 50px;">
<table class="table-bordered" id="fixedtable" > //table头部悬浮锁定
<thead style="display: none;position: fixed;top: 106px;"> //隐藏thead 设置好 距离顶部的位置
<th id="fixed-thdata1">时间</th>//设置 每个th的id
<th id="fixed-thdata2">车速(km/h)</th>
<th id="fixed-thdata3">排放温度(°C)</th>
<th id="fixed-thdata4">NOx浓度(ppm)</th>
</thead>
</table>
<table class="table-bordered" >
<thead >
<th id="thdata1">时间</th>
<th id="thdata2">车速(km/h)</th>
<th id="thdata3">排放温度(°C)</th>
<th id="thdata4">NOx浓度(ppm)</th>
</thead>
<tbody id="data_tbody"> //加载更多 设置id
<tr>
<td>09:42:21</td>
<td>30</td>
<td>20</td>
<td>390</td>
</tr>
<tr>
<td>09:42:21</td>
<td>30</td>
<td>20</td>
<td>390</td>
</tr>
<tr><td>09:42:21</td><td>30</td> <td>20</td><td>390</td></tr>
<tr><td>09:42:21</td><td>30</td> <td>20</td><td>390</td></tr>
<tr><td>09:42:21</td><td>30</td> <td>20</td><td>390</td></tr>
<tr><td>09:42:21</td><td>30</td> <td>20</td><td>390</td></tr>
<tr><td>09:42:21</td><td>30</td> <td>20</td><td>390</td></tr>
<tr><td>09:42:21</td><td>30</td> <td>20</td><td>390</td></tr>
<tr><td>09:42:21</td><td>30</td> <td>20</td><td>390</td></tr>
<tr><td>09:42:21</td><td>30</td> <td>20</td><td>390</td></tr>
<tr><td>09:42:21</td><td>30</td> <td>20</td><td>390</td></tr>
<tr><td>09:42:21</td><td>30</td> <td>20</td><td>390</td></tr>
<tr><td>09:42:21</td><td>30</td> <td>20</td><td>390</td></tr>
<tr><td>09:42:21</td><td>30</td> <td>20</td><td>390</td></tr>
<tr><td>09:42:21</td><td>30</td> <td>20</td><td>390</td></tr>
<tr><td>09:42:21</td><td>30</td> <td>20</td><td>390</td></tr>
<tr><td>09:42:21</td><td>30</td> <td>20</td><td>390</td></tr>
<tr><td>09:42:21</td><td>30</td> <td>20</td><td>390</td></tr>
</tbody>
</table>
</div>
<script>
$(function(){
var $thdata1=$('#thdata1').width()+1;
var $thdata2=$('#thdata2').width()+1;
var $thdata3=$('#thdata3').width()+1;
var $thdata4=$('#thdata4').width()+1; //获取原始table的头部的th的width
$(window).scroll(function () { //当触发屏幕滚动时执行方法
if ($('#data_tbody').length > 0) {
var thbody = $('#data_tbody').prev();//获取tbody的前一个同胞元素 即thead
var thOffset = thbody.offset(); //获取 thead的偏移位置
var scTop = $(window).scrollTop()+thOffset.top; //滚动条相对top的位置
// console.log(thOffset);
// console.log(scTop);
if (scTop > thOffset.top) { //滚动条滚到thead及以下的位置，用临时的thead代替显示
$('#fixedtable thead').css('display', 'block');
$('#fixed-thdata1').css('width',$thdata1);
$('#fixed-thdata2').css('width',$thdata2);
$('#fixed-thdata3').css('width',$thdata3);
$('#fixed-thdata4').css('width',$thdata4);//新代替的thead 的获取width
$('#fixedtable').offset({ top: scTop, left: thOffset.left });
}
else { //滚动条滚到thead上的位置，用table的原始thead显示
$('#fixedtable thead').css('display', 'none');
}
}
});
}) </script>
正在加载
-->
手机端 : js设置table内容 加载更多，并头部锁定悬浮的更多相关文章
- JS实现点击加载更多效果
适用场景:后端直接把所有的文章都给你调出来了,但是领导又让做点击加载更多效果...(宝宝心里苦啊) 点击加载更多效果: 第一个和第二个参数分别是btn和ul的DOM(必填) ...
- js_原生js实现上拉加载更多的功能。
1.人生啊,是我莽撞了啊.这是我公司一个喜欢读书的女孩子的个性签名,喜欢哪些句子,不悲伤,却切切实实的令人喜好. 2.写程序是一件很直接明了的事情,明白了就是明白了,不懂就是不懂,不懂装懂的会让你走很 ...
- iscroll.js 手机上下滑动 加载更多
html <!DOCTYPE html> <html> <head> <title>下拉上拉刷新页面代码</title> <meta ...
- 【前端】上拉加载更多dropload.min.js的使用
代码如下:入职代码修改接口及html为自己的即可(下面主要展示js部分) <!DOCTYPE html><html> <head> <meta charset ...
- mui 上拉加载更多的使用
最近工作之余在用mui的框架开发,对mui了解了一些.在真正的app开发项目中,mui上拉加载模块中有两个坑,现在说一下. 1.在函数自己上拉加载行为后的回调函数 该函数是必须要写的,用来写自己的逻辑 ...
- ListView 加载更多列表 Load More mono forandroid 项目笔记
今天项目经理找我说Listview加载更多的时候会出现一些问题,主要表现在会顿一下.让我我就去找Java的方法看看.自己写出了mono 的加载更多功能.和大家分享一下 先看效果 首先是模型类ListI ...
- SwipeRefreshLayout详解和自定义上拉加载更多
个人主页 演示Demo下载 本文重点介绍了SwipeRefreshLayout的使用和自定View继承SwipeRefreshLayout添加上拉加载更多的功能. 介绍之前,先来看一下SwipeRef ...
- vue10行代码实现上拉翻页加载更多数据，纯手写js实现下拉刷新上拉翻页不引用任何第三方插件
vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件/库 一提到移动端的下拉刷新上拉翻页,你可能就会想到iScroll插件,没错iScroll是一个高性能,资源 ...
- nginx设置反向代理后，页面上的js css文件无法加载
问题现象: nginx配置反向代理后,网页可以正常访问,但是页面上的js css文件无法加载,页面样式乱了. (1)nginx配置如下: (2)域名访问:js css文件无法加载: (3)IP访问:j ...
随机推荐
- 蚂蚁男孩.缓存组件（Framework.Mayiboy.Caching）
它能做什么? 主要是用来方便使用缓存而诞生,该组件封装了RunTimeCache.Memcached.Redis的使用,通过简单配置就能高效快速使用起来. 使用说明 一. 下载源码,自己手动编译 ...
- HEOI2014 南国满地堆轻絮
题目链接:戳我 就是二分一个数,之后记录一个前缀max,然后和当前数做差再/2即可.(因为我们要使得原来的序列变成不下降序列,所以当然是要控制一个上限,以达到后面较小数能以尽可能小的代价增加) 代码如 ...
- 程序媛计划——mysql外键
定义 外键:如果一个表的某个字段指向另一个表的主键,就称之为外键.被指向的表,称之为主表,也叫父表,那么另一个表就是从表,也叫子表 #先新建两个表 mysql> create table aut ...
- 1000. Minimum Cost to Merge Stones
There are N piles of stones arranged in a row. The i-th pile has stones[i] stones. A move consists ...
- “全栈2019”Java多线程第十八章：同步代码块双重判断详解
难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java多 ...
- Python 将一个列表里面的元素拼接成一个字符串
item1 = ["lowman", "isbusy"] item2 = ",".join(item1) # 根据实际需要使用相应的分隔符连 ...
- 网络请求 get 请求时, 如果参数中的字符带有+号
网络请求 get 请求时, 如果参数中的字符带有+号, 今天前端在调用我的API时, 发现有个参数一直没法通过我后台的验证, 但是在前端查看时, 该参数结构又没有什么异常, 又是一番查找, 直到在后端 ...
- 程序猿的日常——Java基础之clone、序列化、字符串、数组
其实Java还有很多其他的基础知识,在日常工作技术撕逼中也是经常被讨论的问题. 深克隆与浅克隆 在Java中创建对象有两种方式: 一种是new操作符,它创建了一个新的对象,并把对应的各个字段初始化成默 ...
- 应该怎么理解 app = Flask(__name__)
初始化生成一个app对象,这个对象就是Flask的当前实例对象,后面的各个方法调用都是这个实例Flask会进行一系列自己的初始化,比如web API路径初始化,web资源加载,日志模块创建等.然后返回 ...
- Java并发工具类之CountDownLatch
CountDownLatch允许一个或则多个线程等待其他线程完成操作. 假如我们有这样的需求:我们需要解析一个excel文件中的多个sheet,我们可以考虑使用多线程,每一个线程解析excel中的一个 ...