--------------------------------------------------------------------------例子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. 《逆袭团队》第九次团队作业【Beta】Scrum meeting 2

    项目 内容 软件工程 任课教师博客主页链接 作业链接地址 团队作业9:Beta冲刺与团队项目验收 团队名称 逆袭团队 具体目标 (1)掌握软件黑盒测试技术:(2)学会编制软件项目总结PPT.项目验收报 ...

  2. Alpha冲刺笔记十:第十天

    课程名称:软件工程1916|W(福州大学) 作业要求:项目Alpha冲刺(十天冲刺) 团队名称:葫芦娃队 作业目标:在十天冲刺里对每天的任务进行总结. 随笔汇总:https://www.cnblogs ...

  3. wordpress如何调用特定页面模板

    我们在制作page页面时经常会调用特定的页面模板,比如专题页,其实我们只要做一个这样的模板就可以了,很简单,定义一下,代码如下,Template Name: service就是具体的页面模板名,这个在 ...

  4. 《团队作业第三、四周》五阿哥小组Scrum 冲刺阶段---Day4

    <团队作业第三.四周>五阿哥小组Scrum 冲刺阶段---Day3 一.项目燃尽图 二.项目进展 20182310周烔今日进展: 主要任务一览:聊天软件主界面 20182330魏冰妍今日进 ...

  5. 做阉割版Salesforce难成伟大的TOB企业

    https://www.lieyunwang.com/archives/446227 猎云注:当前中国市场环境下,有没有可能诞生一批SaaS级企业服务公司?东方富海合伙人陈利伟用三个方面基础性问题解答 ...

  6. 聚类------KNN

    import numpy as np from math import sqrt import operator as opt def normData(dataSet): maxVals = dat ...

  7. Centos7配置静态网卡

    1.打开VMware,查看ifconfig 2.进入网卡编辑 [root@localhost ~]# cd /etc/sysconfig/network-scripts/ [root@localhos ...

  8. Windbg的命令

    前面介绍了Windbg的UI功能,也基本上能完成基本的调试任务,但是WinDBG主要是以命令方式工作的,这些命令在Command Window里输入.WinDBG共支持三类命令:标准命令.元命令和扩展 ...

  9. tox 试用

    安装 pip install tox tox 使用 tox 包含一个tox.ini 文件,此文件可以自动,或者手工编写 tox.ini 文件格式 # content of: tox.ini , put ...

  10. Noip 2017 题目整理

    目录 2017Noip: 小凯的疑惑 时间复杂度 逛公园 奶酪 宝藏(50fen) 列队(QAQ不会,以后再研究吧) 2017Noip: 小凯的疑惑 题目描述 小凯手中有两种面值的金币,两种面值均为正 ...