移动端俩个DIV切换，上滑加载

Posted 2020-10-07 今天的代码你撸了嘛

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了移动端俩个DIV切换，上滑加载相关的知识，希望对你有一定的参考价值。

<!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切换，上滑加载的主要内容，如果未能解决你的问题，请参考以下文章

移动端上滑下滑换图片

关于移动端开发时iOS上滑屏卡顿的问题，以及电话类数字的样式失控问题

移动端监听上滑下滑（判断元素是否滚动到底部）

react ＋ antd-mobile 的listview 在h5移动网页端的下拉刷新和上滑加载的实现

安卓移动端软键盘弹出问题解决方案

使用@media实现移动端使用@2x,@3x切换