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 ...
随机推荐
- 《逆袭团队》第九次团队作业【Beta】Scrum meeting 2
项目 内容 软件工程 任课教师博客主页链接 作业链接地址 团队作业9:Beta冲刺与团队项目验收 团队名称 逆袭团队 具体目标 (1)掌握软件黑盒测试技术:(2)学会编制软件项目总结PPT.项目验收报 ...
- Alpha冲刺笔记十:第十天
课程名称:软件工程1916|W(福州大学) 作业要求:项目Alpha冲刺(十天冲刺) 团队名称:葫芦娃队 作业目标:在十天冲刺里对每天的任务进行总结. 随笔汇总:https://www.cnblogs ...
- wordpress如何调用特定页面模板
我们在制作page页面时经常会调用特定的页面模板,比如专题页,其实我们只要做一个这样的模板就可以了,很简单,定义一下,代码如下,Template Name: service就是具体的页面模板名,这个在 ...
- 《团队作业第三、四周》五阿哥小组Scrum 冲刺阶段---Day4
<团队作业第三.四周>五阿哥小组Scrum 冲刺阶段---Day3 一.项目燃尽图 二.项目进展 20182310周烔今日进展: 主要任务一览:聊天软件主界面 20182330魏冰妍今日进 ...
- 做阉割版Salesforce难成伟大的TOB企业
https://www.lieyunwang.com/archives/446227 猎云注:当前中国市场环境下,有没有可能诞生一批SaaS级企业服务公司?东方富海合伙人陈利伟用三个方面基础性问题解答 ...
- 聚类------KNN
import numpy as np from math import sqrt import operator as opt def normData(dataSet): maxVals = dat ...
- Centos7配置静态网卡
1.打开VMware,查看ifconfig 2.进入网卡编辑 [root@localhost ~]# cd /etc/sysconfig/network-scripts/ [root@localhos ...
- Windbg的命令
前面介绍了Windbg的UI功能,也基本上能完成基本的调试任务,但是WinDBG主要是以命令方式工作的,这些命令在Command Window里输入.WinDBG共支持三类命令:标准命令.元命令和扩展 ...
- tox 试用
安装 pip install tox tox 使用 tox 包含一个tox.ini 文件,此文件可以自动,或者手工编写 tox.ini 文件格式 # content of: tox.ini , put ...
- Noip 2017 题目整理
目录 2017Noip: 小凯的疑惑 时间复杂度 逛公园 奶酪 宝藏(50fen) 列队(QAQ不会,以后再研究吧) 2017Noip: 小凯的疑惑 题目描述 小凯手中有两种面值的金币,两种面值均为正 ...