--------------------------------------------------------------------------例子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上拉加载更多的更多相关文章

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

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

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

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

  3. 移动端h5列表页上拉加载更多

    背景 上星期公司要求做一个回收书籍的h5给安卓用,里面有一个功能是回收记录列表.设计师那边出的稿子是没有要求分页或者是上拉刷新的,但是众所周知,列表页数据很多的情况下,h5加载是很慢的.所以我一开始是 ...

  4. H5基于iScroll实现下拉刷新,上拉加载更多

    前言 前一段有个手机端的项目需要用到下拉刷新和上拉加载更多的效果,脑海里第一反映就是微博那种效果,刚开始的理解有些偏差,以为下拉也是追加数据,上拉也是追加数据,后请教同事后发现其实下拉只是刷新最新数据 ...

  5. H5页面基于iScroll.js插件实现下拉刷新,上拉加载更多

    前言 在我之前的项目中,页面总是干巴巴的,用户的体验不是特别完美,我也是一直觉得把设计师给到的psd做出来就好,很少考虑用户的感受.我喜欢看不同的App,操作每个步骤,观赏每个能和我互动的交互设计效果 ...

  6. h5 实现页面上拉加载更多数据

    您好,您的上拉加载更多的代码来喽: html:(style部分:html部分:js部分--js部分主要就是监控上拉,调接口) //上拉加载更多css <style> .wait-loadi ...

  7. 原生js移动端touch事件实现上拉加载更多

    大家都知道jQuery里没有touch事件,所以在移动端使用原生js实现上拉加载效果还是很不错的,闲话不多说,代码如下: //获取要操作的元素 var objSection = document.ge ...

  8. 常见开发需求之angular上拉加载更多

    需求   移动端使用angular实现上拉加载更多的条目,这个需求比较常见,网上的插件改动起来比较麻烦,不如自己写一个最适合,以前有同事写了一个,奈何bug太多,后来改分页了,我们产品说什么都让做,没 ...

  9. ListView实现Item上下拖动交换位置 并且实现下拉刷新 上拉加载更多

    ListView实现Item上下拖动交换位置  并且实现下拉刷新  上拉加载更多 package com.example.ListViewDragItem; import android.app.Ac ...

随机推荐

  1. fastjson异常(字符串集合转成字符串数组)

    我是在项目中,因为受到一个string类型的list集合,然后需要把这个字符串发送给前端,进行解析. 但是前端收到的是一个字符串,不能进行解析. 所以采用 ArrayUtils.clone(JSONO ...

  2. 《基于B_S模式的教务管理系统设计与实现》论文笔记(十九)

    标题:广州医科大学考务管理系统的研究与分析 一.基本信息 时间:2012 来源:南通大学杏林学院 关键词:: 考务管理:网络考试:数据库系统 二.研究内容 1.重修补考报名考务管理系统采用的技术: 重 ...

  3. phantomJS+Python 隐形浏览器

    phantomjs解压后,把文件夹bin中的phantomjs.exe移到python文件夹中的Scripts中 实例: from selenium import webdriver driver = ...

  4. 编程小白入门分享三:Spring AOP统一异常处理

    Spring AOP统一异常处理 简介 在Controller层,Service层,可能会有很多的try catch代码块.这将会严重影响代码的可读性."美观性".怎样才可以把更多 ...

  5. 日常SQL总结

    THEN '理财帐户' ELSE '其他' end case后可以加入条件在写when,length(String) 为string的字符长度 length(),括号里不仅可以是string的字符串, ...

  6. “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 ...

  7. Mybatis框架-update节点元素的使用

    今天我们学习一下mybatis框架中的update节点元素的使用 需求:修改用户表中的一条数据记录,修改编号为21的用户的密码 UserMapper.xml UserMapper.java 编写测试方 ...

  8. 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 ...

  9. PostgreSQL JSON 处理

    1.JSON类型    PostgreSQL支持JSON和JSONB.这两种类型在使用上几乎完全一致,主要区别是: (1)JSON类型把输入的数据原封不动的存放到数据库中.JSONB类型在存放时把JS ...

  10. (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进制字 ...