<link rel="stylesheet" href="yunsuifang/pc-patients/css/dropload.css" />
<style>
.opacity {
webkit-animation: opacity 0.3s linear;
animation: opacity 0.3s linear;
}
@-webkit-keyframes opacity {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes opacity {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.opacity {
text-align: left;
}
</style>
<!--主题内容-->
<div >
<div ></div>
</div>
<script>
$(function() {
//入参
var page = 0; //页码
var size = 50; //每页显示条数
var loginUsrId = window.localStorage.getItem("XMIDWARE_APP_USRGUID");
var dropload = $(‘.content‘).dropload({
domDown: {
domClass: ‘dropload-down‘,
domRefresh: ‘<div >↑上拉加载更多</div>‘,
domLoad: ‘<div ><span ></span>加载中...</div>‘,
domNoData: ‘<div >暂无数据</div>‘
},
scrollArea: window,
loadDownFn: function(me) {
page++;
// 拼接HTML
var result = ‘‘;
$.ajax({
type: ‘POST‘,
url: ‘https://tsch.fromfuture.cn:7714/GZ/v1/cloud/queryPageHzsfjh?usrguid=‘ + loginUsrId + ‘&pageNo=‘ + page + ‘&pageSize=‘ + size,
//async: false,
timeout: 8000,
success: function(data) {
data = data.trim();
data = data.replace(/\n/g, ‘‘);
data = JSON.parse(data)
console.log(data.data)
var data = data.data;
var result = ‘‘;
if(data.parameterType.length > 0) {
for(var i = 0; i < data.parameterType.length; i++) {
//DOM取数据库数据
var followdatetime = data.parameterType[i].followdatetime;
var name = data.parameterType[i].name;
var deptnam = data.parameterType[i].deptnam;
var followoption = data.parameterType[i].followoption;
var docguid = data.parameterType[i].docguid;
console.log(followoption);
var strs = new Array(); //定义一数组
strs = followoption.split(","); //字符分割
result += `<div style="padding: 0 30px;background: #fff;">
<p ">日期:</span>
<span ">
<span "> ${name} </span>
</p>
<p ">科室：</span>
<span ">
<span width: 77%;" >
</span>
</p>
</div>
<p style="background: #fff;padding-left: 30px;text-align: right;cursor:pointer;">
<span style="color: #00A8EC;">进入随访诊室</span>
<i style="margin-right: 25px;height: 40px;line-height: 40px;color: #E2E2E2;"></i>
</p>`;
}
$(‘.lists‘).append(result); // 插入数据到页面，放到最后面
for(j = 0; j < strs.length; j++) {
console.log(strs[j]);
var ss = ‘‘;
ss += ‘<i >‘ + strs[j] + ‘</i>‘;
console.log(ss);
$(‘#followoption‘).append(ss)
}
} else {
tab1LoadEnd = true; // 数据加载完
me.lock(); // 锁定
me.noData(); // 无数据
}
// 为了测试，延迟1秒加载
setTimeout(function() {
me.resetload(); // 每次数据插入，必须重置
}, 1000);
},
error: function(xhr, type) {
console.log(‘Ajax error!‘);
me.resetload(); // 即使加载出错，也得重置
}
});
}
});
$(‘.lists‘).siblings().eq(1).remove();
});
</script>
分页插件，屏幕滚动ajax加载数据渲染页面
原文地址：http://www.cnblogs.com/hjptopshow/p/7509706.html