分頁插件，屏幕滾動ajax加載數據渲染頁面

<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;
}
.iclaa{
margin-top:5px;
border: 1px solid #1097E1;
font-style: normal;
display: inline-block;
height: 25px;
line-height: 24px;
padding: 0 8px;
border-radius: 10px;
color: #1097E1;
margin-left: 5px;
font-size: 13px;
}
</style>

<!--主題內容-->
<div class="content" style="margin-bottom: 10px;margin-top: 54px;">
<div class="lists"></div>
</div>

<script>
$(function() {

//入參
var page = 0; //頁碼
var size = 3; //每頁顯示條數
//var usrguid = "4DF60C3C69D878C3E053AA0012ACAEF9"; //患者guid
var loginUsrId= window.localStorage.getItem("XMIDWARE_APP_USRGUID");
// dropload

var dropload = $('.content').dropload({

domDown: {
domClass: 'dropload-down',
domRefresh: '<div class="dropload-refresh">↑上拉加載更多</div>',
domLoad: '<div class="dropload-load"><span class="loading"></span>加載中...</div>',
domNoData: '<div class="dropload-noData">沒有更多數據啦</div>'
},
scrollArea: window,
loadDownFn: function(me) {

page++;
// 拼接HTML
var result = '';
$.ajax({
type: 'POST',
url: 'https://tsch.fromfuture.cn:7714/GZ/Docpre/GetDTfollowupRecordPC?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 department= data.parameterType[i].department;
var followoption = data.parameterType[i].followoption;
var guid= data.parameterType[i].guid;
var strs= new Array(); //定義一數組
strs=followoption.split(","); //字符分割
console.log(followoption);
var ss = '';
　　　　　　for (j=0;j<strs.length ;j++ ){
　　　　　　　　console.log(strs[j]);
　　　　　　　　ss += '<i class="iclaa">'+strs[j]+'</i>';
　　　　　　　　console.log(ss);
　　　　　　　　}

　　　　　　result += '<div class="opacity" style="padding: 0 30px;background: #fff;">';
　　　　　　result += '<p class="">';
　　　　　　result += ' <span class="">日期:</span>';
　　　　　　result += '<span class="">'+followdatetime+'</span>';
　　　　　　result += ' </p>';
　　　　　　result += ' <p class="">';
　　　　　　result += ' <span class="">醫生:</span>';
　　　　　　result += ' <span class=""> '+name+' </span>';
　　　　　　result += ' </p>';
　　　　　　result += '<p class="">';
　　　　　　result += ' <span class="">科室：</span>';
　　　　　　result += ' <span class="">'+department+'</span>';
　　　　　　result += ' </p>';
　　　　　　result += ' <p style="padding-bottom: 10px;">';
　　　　　　result += ' <span class="">隨訪內容：</span>';
　　　　　　result += ' <span style="width: 77%;margin-top: -3px;">';
　　　　　　result += ss
　　　　　　result += ' </span>';
　　　　　　result += ' </p>';
　　　　　　result += ' </div>';
　　　　　　result += '<p class="detail" value="'+guid+'" style="margin-top: 13px;background: #fff;padding-top: 11px;padding-bottom: 11px;padding-left: 30px;text-align: right;cursor:pointer;">';
　　　　　　result += ' <span style="color: #00A8EC;">查看詳情</span>';
　　　　　　result += ' <i class="glyphicon glyphicon-menu-right icla" style="margin-right: 25px;height: 40px;line-height: 40px;color: #E2E2E2;"></i>';
　　　　　　result += ' </p>';
　　　　}

　　　　　　} else {
　　　　　　　　ab1LoadEnd = true;// 數據加載完
　　　　　　　　me.lock();// 鎖定
　　　　　　　　me.noData();// 無數據
　　　　　　}
　　　　　　// 爲了測試，延遲1秒加載
　　　　　　setTimeout(function() {
　　　　　　　　$('.lists').append(result);// 插入數據到頁面，放到最後面
　　　　　　　　$('.detail').click(function(){
　　　　　　　　//接口拿到的guid，傳給詳情頁的guid
　　　　　　　　var CurrentGuid = $(this).attr('value');
　　　　　　　　//alert(CurrentGuid);
　　　　　　　　//window.open("FU_FollowUpDetails?CurrentGuid="+CurrentGuid);
　　　　　　　　openWindow('L.sp?id=FU_FollowUpDetails&CurrentGuid='+CurrentGuid)
　　　　　　})
　　　　　　　　me.resetload();// 每次數據插入，必須重置
　　　　　　　　}, 1000);

　　　　},

　　　　　　　　error: function(xhr, type) {
　　　　　　　　console.log('Ajax error!');
　　　　　　　　me.resetload();// 即便加載出錯，也得重置

　　　　　　}
　　　　});
　　　　}
　　　　　　});
　　　　$('.lists').siblings().eq(1).remove();
　　　　});



</script>