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 ...
随机推荐
- 项目Alpha冲刺——集合
作业描述 课程: 软件工程1916|W(福州大学) 作业要求: 项目Alpha冲刺(团队) 团队名称: 火鸡堂 作业目标: 完成项目Alpha冲刺 团队信息 队名:火鸡堂 队员学号 队员姓名 博客地址 ...
- JS获取访客IP进行自动跳转
因业务需要进行地区判断跳转指定站点,下面是我个人实现的办法,分享给大家,仅供参考,切勿做非法用途 第一步,获取IP并判断归属地 直接使用搜狐的IP库查询接口 <script type=" ...
- 删除WordPress菜单wp-nav-menu中li的class或id样式
我们都知道wordpress已经集成了一些通用的css样式,比如wp-nav-menu菜单会有很多的class,不想看到那么多的选择器,想要清净的世界要如何操作呢?随ytkah一起来看看 <li ...
- 性能:Output层面
将数据保存到MySQL中 import java.sql.DriverManager import org.apache.spark.storage.StorageLevel import org.a ...
- 内部cms系统测试
转载至51testing:http://www.51testing.com/html/34/n-4463534.html 内部系统的功能以及如何测试 前文有提到,我定义的内部系统,是一个由目前主流语言 ...
- if语句的嵌套:从键盘输入3个实数,利用条件表达式求其最大者。
#include<stdio.h>void main(){ float a,b,c,max; scanf("%f%f%f",&a,&b,&c); ...
- 使用docker 实现MySQL主从同步/读写分离
1. 利用 docker 实现 mysql 主从同步 / 读写分离 为了保证数据的完整和安全,mysql 设计了主从同步,一个挂掉还可以用另个.最近重构论坛,想来改成主从吧.担心失误,就先拿 dock ...
- Github搭建简单的博客
1)安装pelcan和markdown pip install pelican markdown --upgrade 2)创建一个文件夹用来作为博客的目录 mkdir 博客目录 3)cd到该目录下运行 ...
- BZOJ 5287: [Hnoi2018]毒瘤 动态dp(LCT+矩阵乘法)
自己 yy 了一个动态 dp 做法,应该是全网唯一用 LCT 写的. code: #include <bits/stdc++.h> #define ll long long #define ...
- 留言板(Nodejs)
一.知识点 ①nodejs实际开发中,通常把所有的HTML文件放到views目录中 ②nodejs实际开发中,通常把所有的静态资源文件放到public目录中,方便统一处理 当浏览器收到HTML响应内容 ...