h5上拉加载更多
--------------------------------------------------------------------------例子1
<div class="boothInfo bgWhite" id="mCompanyList">
@foreach (var ritem in Model)
{
if (ritem.Room != null)
{
ritem.Room = ritem.Room.Replace("6号展厅", "C区").Replace("5号展厅", "A区").Replace("14号展厅", "B区").Replace("0号展厅", "C区");
}
<div class="booth">
<div class="ztInfo">@(ritem.Room??"")@(ritem.SeatIndex)</div>
<i class="ztInfo_jt"></i>
<h2><a href="/Subject2018/mMiddleSenior/mjobdetail?keyWork=@(ritem.EnterpriseName)">@ritem.EnterpriseName</a></h2>
<div class="info">
单位简介:<span class="comInfo">
@ritem.EnterpriseIntroduction
</span>
</div>
<ul class="boothUL clearfix">
@foreach (var citem in ritem.Positions)
{
<li><a href="/Subject2018/mMiddleSenior/mjobdetail?keyWork=@(ritem.EnterpriseName)#position@(citem.PositionID)">@citem.PositionName</a></li>
}
</ul>
</div>
}
<div class="alreadyBottom">向下滚动加载</div>
</div>
//上拉加载更多 begin
var isOnRequest=false;
var range = 50; //距下边界长度/单位px
var maxnum = 20; //设置加载最多次数
var num = 3;
var totalheight = 0;
var isEnd=false;
// var instryID=parseInt('')
var main = $("#mCompanyList"); //主体元素
if(!isEnd){$("#mCompanyList .alreadyBottom").remove();}
$(window).scroll(function () {
var srollPos = $(window).scrollTop(); //滚动条距顶部距离(页面超出窗口的高度)
var html = [];
totalheight = parseFloat($(window).height()) + parseFloat(srollPos);
if (($(document).height() - range) <= totalheight) {
if(isOnRequest==true)return;
isOnRequest=true;
if (!isEnd) {
$.ajax({
type: "Get",
url: '/Subject2018/mMiddleSenior/mCompanyListSearch',
data: { id: n,pageNo:num,keyWork:"",instryID:'@ViewBag.curindustry' },
async: false,
success: function (data) {
if (data) {
num=num+1;
var arrLength=data.length;
if(arrLength<10)
{
isEnd=true;
}
if(arrLength>0)
{
$("#mCompanyList .alreadyBottom").remove();
for (var i = 0; i < arrLength; i++) {
html.push('<div class="booth">');
html.push('<div class="ztInfo">'+(data[i].Room+data[i].SeatIndex+"").replace("5号展厅","A区").replace("6号展厅","C区").replace("14号展厅","B区")+'</div><i class="ztInfo_jt"></i>')
html.push('<h2><a href="/Subject2018/mMiddleSenior/mjobdetail?keyWork='+data[i].EnterpriseName+'">'+data[i].EnterpriseName+'</a></h2>');
html.push('<div class="info">单位简介:<span class="comInfo">'+data[i].EnterpriseIntroduction+'</span></div>');
var cpositionArray=data[i].Positions;
var c_arraylength=cpositionArray.length;
if(c_arraylength>0){
html.push('<ul class="boothUL clearfix">');
for(var c=0;c<c_arraylength;c++)
{
html.push('<li><a href="/Subject2018/mMiddleSenior/mjobdetail?keyWork='+data[i].EnterpriseName+'#position'+cpositionArray[c].PositionID+'">'+cpositionArray[c].PositionName+'</a></li>');
}
html.push('</ul>');
}
html.push('</div>');
html = html.join('')
main.append(html);
html = [];
}
if(isEnd)
{
main.append("<div class='alreadyBottom'>已经到底了哟</div>");
isOnRequest=true;
}
else
{
main.append("<div class='alreadyBottom'>加载中...</div>");
isOnRequest=false;
}
}
ellipsisInfo();
} else {
layer.msg(data.msg || '验证失败');
}
}
});
//for (var i = 0; i < itemCount; i++) {
// html.push('<div class="booth">');
// html.push('<a href="" class="zwt">展位图</a>');
// html.push('<h2><a href="">南京证券股份有限公司南宁竹溪大道证券营业部</a></h2>');
// html.push('<div class="booth_icon">展位号:8号展厅112#</div>');
// html.push('<div class="info">单位简介:<span class="comInfo">南京证券是1990年10月经中国人民银行批准设立的江苏省第一家专业证券机构,全国创新类证券公司。截至2009年12月,注册资本17.71亿元,总资产142.08亿元,净资产35.6亿元,净资本29.85亿元,控股南证期货有限责任公司,发起设立"富安达"基金管理公司。</span></div>');
// html.push('<ul class="boothUL clearfix">');
// html.push('<li><a href="">会计</a></li>');
// html.push('<li><a href="">会计</a></li>');
// html.push('<li><a href="">会计</a></li>');
// html.push('</ul>');
// html.push('</div>');
// html = html.join('');
// main.append(html);
// num++;
// html = [];
// if (num > alliCount) {
// break;
// }
//}
}else{
$("#mCompanyList .alreadyBottom").remove();
main.append("<div class='alreadyBottom'>已经到底了哟</div>");
}
}
});
//上拉加载更多 end
--------------------------------------------------------------------------例子2
h5上拉加载更多的更多相关文章
- 基于SwiperJs的H5/移动端下拉刷新上拉加载更多的效果
最早时,公司的H5项目中曾用过点击一个"加载更多"的DOM元素来实现分页的功能,后来又用过网上有人写的一个上拉加载更多的插件,那个插件是页面将要滚动到底部时就自动请求数据并插入到页 ...
- 基于SwiperJs的H5/移动端下拉刷新上拉加载更多
最早时,公司的H5项目中曾用过点击一个"加载更多"的DOM元素来实现分页的功能,后来又用过网上有人写的一个上拉加载更多的插件,那个插件是页面将要滚动到底部时就自动请求数据并插入到页 ...
- 移动端h5列表页上拉加载更多
背景 上星期公司要求做一个回收书籍的h5给安卓用,里面有一个功能是回收记录列表.设计师那边出的稿子是没有要求分页或者是上拉刷新的,但是众所周知,列表页数据很多的情况下,h5加载是很慢的.所以我一开始是 ...
- H5基于iScroll实现下拉刷新,上拉加载更多
前言 前一段有个手机端的项目需要用到下拉刷新和上拉加载更多的效果,脑海里第一反映就是微博那种效果,刚开始的理解有些偏差,以为下拉也是追加数据,上拉也是追加数据,后请教同事后发现其实下拉只是刷新最新数据 ...
- H5页面基于iScroll.js插件实现下拉刷新,上拉加载更多
前言 在我之前的项目中,页面总是干巴巴的,用户的体验不是特别完美,我也是一直觉得把设计师给到的psd做出来就好,很少考虑用户的感受.我喜欢看不同的App,操作每个步骤,观赏每个能和我互动的交互设计效果 ...
- h5 实现页面上拉加载更多数据
您好,您的上拉加载更多的代码来喽: html:(style部分:html部分:js部分--js部分主要就是监控上拉,调接口) //上拉加载更多css <style> .wait-loadi ...
- 原生js移动端touch事件实现上拉加载更多
大家都知道jQuery里没有touch事件,所以在移动端使用原生js实现上拉加载效果还是很不错的,闲话不多说,代码如下: //获取要操作的元素 var objSection = document.ge ...
- 常见开发需求之angular上拉加载更多
需求 移动端使用angular实现上拉加载更多的条目,这个需求比较常见,网上的插件改动起来比较麻烦,不如自己写一个最适合,以前有同事写了一个,奈何bug太多,后来改分页了,我们产品说什么都让做,没 ...
- ListView实现Item上下拖动交换位置 并且实现下拉刷新 上拉加载更多
ListView实现Item上下拖动交换位置 并且实现下拉刷新 上拉加载更多 package com.example.ListViewDragItem; import android.app.Ac ...
随机推荐
- fastjson异常(字符串集合转成字符串数组)
我是在项目中,因为受到一个string类型的list集合,然后需要把这个字符串发送给前端,进行解析. 但是前端收到的是一个字符串,不能进行解析. 所以采用 ArrayUtils.clone(JSONO ...
- 《基于B_S模式的教务管理系统设计与实现》论文笔记(十九)
标题:广州医科大学考务管理系统的研究与分析 一.基本信息 时间:2012 来源:南通大学杏林学院 关键词:: 考务管理:网络考试:数据库系统 二.研究内容 1.重修补考报名考务管理系统采用的技术: 重 ...
- phantomJS+Python 隐形浏览器
phantomjs解压后,把文件夹bin中的phantomjs.exe移到python文件夹中的Scripts中 实例: from selenium import webdriver driver = ...
- 编程小白入门分享三:Spring AOP统一异常处理
Spring AOP统一异常处理 简介 在Controller层,Service层,可能会有很多的try catch代码块.这将会严重影响代码的可读性."美观性".怎样才可以把更多 ...
- 日常SQL总结
THEN '理财帐户' ELSE '其他' end case后可以加入条件在写when,length(String) 为string的字符长度 length(),括号里不仅可以是string的字符串, ...
- “Another git process seems to be running in this repository...”Git此问题解决
Git中显示:Another git process seems to be running in this repository, e.g.an editor opened by 'git comm ...
- Mybatis框架-update节点元素的使用
今天我们学习一下mybatis框架中的update节点元素的使用 需求:修改用户表中的一条数据记录,修改编号为21的用户的密码 UserMapper.xml UserMapper.java 编写测试方 ...
- KMP + BZOJ 4974 [Lydsy1708月赛]字符串大师
KMP 重点:失配nxtnxtnxt数组 意义:nxt[i]nxt[i]nxt[i]表示在[0,i−1][0,i-1][0,i−1]内最长相同前后缀的长度 图示: 此时nxt[i]=jnxt[i]=j ...
- PostgreSQL JSON 处理
1.JSON类型 PostgreSQL支持JSON和JSONB.这两种类型在使用上几乎完全一致,主要区别是: (1)JSON类型把输入的数据原封不动的存放到数据库中.JSONB类型在存放时把JS ...
- (a2b_hex)binascii.Error: Non-hexadecimal digit found
HEX_CHAR = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f'] 错误:16进制字 ...