移動端倆個DIV切換，上滑載入

最後更新：2017-09-18 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：drop counter flexbox get webkit jquer parameter mini link

<!doctype html>
<html lang="zh-cn">
<head>
<meta name="viewport" content="initial-scale=1, user-scalable=0, minimal-ui" charset="gbk">
<title>隨訪計劃與隨訪記錄app</title>
<style>
*{
margin: 0;
padding:0;
-webkit-tap-highlight-color:rgba(0,0,0,0);
-webkit-text-size-adjust:none;
}
html{
font-size:10px;
}
body{
background-color: #f5f5f5;
font-size: 1.2em;
}
.tab{
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
height: 44px;
line-height: 44px;
/*border-bottom: 1px solid #1097E1;*/
background-color: #eee;
}
.tab .item{
display: block;
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
width: 100%;
font-size: 14px;
text-align: center;
color: #333;
text-decoration: none;
}
.tab .cur{
height: 42px;
border-bottom: 2px solid #1097E1;
color: #1097E1;
}
.content{
background-color: #fff;
}
.content .item{
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-ms-flex-align:center;
-webkit-box-align:center;
box-align:center;
-webkit-align-items:center;
align-items:center;
padding:3.125%;
border-bottom: 1px solid #ddd;
color: #333;
text-decoration: none;
}
.content .item img{
display: block;
width: 40px;
height: 40px;
border:1px solid #ddd;
}
.content .item h3{
display: block;
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
width: 100%;
max-height: 40px;
overflow: hidden;
line-height: 20px;
margin: 0 10px;
font-size: 1.2rem;
}
.content .item .date{
display: block;
height: 20px;
line-height: 20px;
color: #999;
}
.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;
}
}
i{
height: auto !important;
}
</style>
<link rel="stylesheet" href="../css/bootstrap.min.css" />
<link rel="stylesheet" href="../css/dropload.css">
</head>
<body>
<div class="tab">
<a href="javascript:;" class="item cur">隨訪計劃</a>
<a href="javascript:;" class="item">隨訪記錄</a>
</div>
<div class="content" style="font-size: 15px;">
<div class="lists" style="background-color: #eee;"></div>
<div class="lists" style="background-color: #eee;"></div>
</div>


<script src="../js/jquery-1.7.2.min.js"></script>
<script src="../js/dropload.min.js"></script>
<script>
$(function(){
var itemIndex = 0;
var tab1LoadEnd = false;
var tab2LoadEnd = false;
//var loginUsrId= window.localStorage.getItem("XMIDWARE_APP_USRGUID");
var loginUsrId= "590F10D447DC4ECEE050007F01003690";
// tab
$(‘.tab .item‘).on(‘click‘,function(){
var $this = $(this);
itemIndex = $this.index();
$this.addClass(‘cur‘).siblings(‘.item‘).removeClass(‘cur‘);
$(‘.lists‘).eq(itemIndex).show().siblings(‘.lists‘).hide();

// 如果選中菜單一
if(itemIndex == ‘0‘){
// 如果資料沒有載入完
if(!tab1LoadEnd){
// 解鎖
dropload.unlock();
dropload.noData(false);
}else{
// 鎖定
dropload.lock(‘down‘);
dropload.noData();
}
// 如果選中菜單二
}else if(itemIndex == ‘1‘){
if(!tab2LoadEnd){
// 解鎖
dropload.unlock();
dropload.noData(false);
}else{
// 鎖定
dropload.lock(‘down‘);
dropload.noData();
}
}
// 重設
dropload.resetload();
});

var counter = 0;
var counter1=0;
// 每頁展示4個

// dropload
var dropload = $(‘.content‘).dropload({
scrollArea : window,
loadDownFn : function(me){
// 載入菜單一的資料

if(itemIndex == ‘0‘){
counter++;
$.ajax({
type: ‘post‘,
url: ‘https://tsch.fromfuture.cn:7714/GZ/v1/cloud/queryPageHzsfjh?usrguid=‘+loginUsrId+‘&pageSize=3&pageNo=‘+counter,
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 = ‘‘;

/* pageEnd = num * counter;
pageStart = pageEnd - num;*/
console.log(data.parameterType.length);
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 strs = new Array(); //定義一數組
strs = followoption.split(","); //字元分割
console.log(strs);
var ss = ‘‘;
//插入i
for(j = 0; j < strs.length; j++) {
console.log(strs[j]);
ss += ‘<i style="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;">‘ + strs[j] + ‘</i>‘;
console.log(ss);

}

//console.log(followoption);
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="">‘ + deptnam + ‘</span>‘;
result += ‘ </p>‘;
result += ‘ <p style="padding-bottom: 10px;">‘;
result += ‘ <span class="">隨訪內容：</span>‘;
result += ‘ <span style="width: 77%;margin-top: -3px;"id="followoption">‘;
result += ss
result += ‘ </span>‘;
result += ‘ </p>‘;
result += ‘ </div>‘;
result += ‘<p 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" style="margin-right: 25px;height: 40px;line-height: 40px;color: #E2E2E2;"></i>‘;
result += ‘ </p>‘;

}

}else{
// 資料載入完
tab1LoadEnd = true;
// 鎖定
me.lock();
// 無資料
me.noData();

}
// 為了測試，延遲1秒載入
setTimeout(function(){
$(‘.lists‘).eq(itemIndex).append(result);
// 每次資料載入完，必須重設
me.resetload();
},1000);
},
error: function(xhr, type){
alert(‘Ajax error!‘);
// 即使載入出錯，也得重設
me.resetload();
}
});
// 載入菜單二的資料
}else if(itemIndex == ‘1‘){

counter1++;
//console.log(111);
$.ajax({
type: ‘post‘,
url: ‘https://tsch.fromfuture.cn:7714/GZ/Docpre/GetDTfollowupRecordPC?usrguid=‘+loginUsrId+‘&pageSize=3&pageNo=‘+counter1,
success: function(data){

// console.log(data)
data = data.trim();
data = data.replace(/\n/g, ‘‘);
data = JSON.parse(data)
console.log(data.data.parameterType)
var a=data.data.parameterType;
var result = ‘‘;
if(a.length>0){
for(var i = 0; i <a.length; i++){
//DOM取資料庫資料
var followdatetime = a[i].followdatetime;
var name = a[i].name;
var department = a[i].department;
var followoption = a[i].followoption;
var guid = a[i].guid;
var strs = new Array(); //定義一數組
strs = followoption.split(","); //字元分割
console.log(followoption);
var ss = ‘‘;
//插入i
for(j = 0; j < strs.length; j++) {
console.log(strs[j]);

ss += ‘<i style="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;">‘ + 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;" id="followoption">‘;
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" style="margin-right: 25px;height: 40px;line-height: 40px;color: #E2E2E2;"></i>‘;
result += ‘ </p>‘;
}
// 如果沒有資料
}else{
tab2LoadEnd = true;
// 鎖定
me.lock();
// 無資料
me.noData();

}
// 為了測試，延遲1秒載入
setTimeout(function(){
$(‘.lists‘).eq(itemIndex).append(result);

$(‘.detail‘).click(function() {
//介面拿到的guid，傳給詳情頁的guid
var CurrentGuid = $(this).attr(‘value‘);
//alert(CurrentGuid);
window.open("FollowUpDetails_App.html?CurrentGuid=" + CurrentGuid);
})
// 每次資料載入完，必須重設
me.resetload();
},1000);
},
error: function(xhr, type){
//alert(‘Ajax error!‘);
// 即使載入出錯，也得重設
me.resetload();
}
});
}
}
});
});
</script>
</body>
</html>

移動端倆個DIV切換，上滑載入

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More