tab切換緩加載
htmljavascript
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<c:set var="cep" value="${pageContext.request.contextPath}" />css
<!DOCTYPE html>
<html>
<head>
<jsp:include page="../../public/wxcep_mobile.jsp"></jsp:include>
<meta charset="UTF-8">
<title> 通知列表</title>
<script type="text/javascript">
var cepPath='${cep}';
</script>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="http://cdn.weixiaojia.cn/pulg/weui/weui.css" />
<link rel="stylesheet" type="text/css" href="http://cdn.weixiaojia.cn/mobile/css/expand/weiui_expand.css" />
<link rel="stylesheet" href="${cep}/resources/mobile/css/notice/notice_list_new.css" />
<!--缺省頁樣式-->
<link rel="stylesheet" href="${cep}/resources/mobile/css/queshengPage.css"/>
</head>
<body>
<div class="box">
<!--導航切換-->
<div class="weui_tab">
<div class="weui_navbar">
<div class="nav_tab active" datatoggle="receive">
已接收
</div>
<div class="nav_tab" datatoggle="send">
已發送
</div>
<div class="nav_tab waitsend" datatoggle="wait">
待發送
</div>
</div>
</div>
<div class="weui_cells weui_cells_access YJSdetails">
</div>
<div class="weui_cells weui_cells_access YFSdetails" style="display:none;">
</div>
<div class="weui_cells weui_cells_access DFSdetails"style="display:none;" >
</div>
<p class="loading" >
----正在加載----
</p>
<p class="footer">
----俺是有底線的----
</p>
<div class="weui_tool_create" onclick="createNotice();"></div>
<div class="nodata-hint" style="display: none;">
<div class="default_content">
<span class="default_icon"></span>
</div>
<p class="default_font">暫無數據</p>
</div>
</div>
<script type="text/javascript" src="http://apps.bdimg.com/libs/zepto/1.1.4/zepto.min.js"></script>
<script type="text/javascript" src="${cep }/resources/mobile/js/notice/notice_list_new.js">
</script>
</body>
</html>
html
cssjava
.weui_tab{
width: 100%;
height: 44px;
position: fixed;
top:0;
z-index: 5;
background: #FBF9FE;
}
.nav_tab{
float: left;
width: 30%;
padding:2px 0;
background: #FFFFFF;
margin: 8px 0px;
font-size: 14px;
text-align: center;
border: 1px solid #DADADA;
}
.nav_tab:after{
border: 1px solid #DADADA;
}
.nav_tab.active{
background: #9EEC67;
/*#FFE36C*/
}
.weui_navbar{
height:30px;
width: 100%;
}
div[datatoggle="receive"]{
margin-left: 10px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
border-right:0;
}
div[datatoggle="wait"]{
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-left:0 ;
}
.releasetime{
margin-left: 10px;
}
.footer,.loading{
text-align: center;
display: none;
margin:20px 0;
color:#8E8E8E;
}
.weui_cells.weui_cells_access.YJSdetails,.weui_cells.weui_cells_access.YFSdetails,.weui_cells.weui_cells_access.DFSdetails{
margin-top: 44px;
}ajax
jsjson
var flag=true;//判斷是否發送ajax請求
var toggle="";//切換tab的值
var pagenumYJS=1;//頁碼數（請求次數）
var pagenumYFS=1;
var pagenumDFS=1;
var appendhtml="";//請求得到的dom結構
/*tab切換*/app
$(".nav_tab").on("click",function(){
$(this).siblings().removeClass("active");
$(this).addClass("active");
//設置滾動條初始位置
$("body").scrollTop(0,0);
$(".YJSdetails").html("");
$(".YFSdetails").html("");
$(".DFSdetails").html("");
$(".footer").hide();
var toggle=$(this).attr("datatoggle");
appendhtml="";
if(toggle=="receive"){
$(".YJSdetails").css("display","block");
$(".YFSdetails").css("display","none");
$(".DFSdetails").css("display","none");
flag=false;
pagenumYJS=1;
console.log(pagenumYJS);
$.ajax({//已接收
type : "post",
url: cepPath + '/mobile/notice/getYJSNoticeList',
async:true,
data: {
pagenum: 0,
count: 10
},
//dataType:'json',
success:function(data){
var data = eval("(" + data +")");
if(data.length==0){
//缺省頁
$(".nodata-hint").show();
}else{
//將獲取到的數據append dom中
for(var i=0;i<data.length;i++){
appendhtml+='<a class="weui_cell" href="'+cepPath+'/mobile/notice/toNoticeDetail?noticeId='+data[i].id+'"><div class="weui_cell_bd weui_cell_primary">';
appendhtml+='<p>'+data[i].noticeTitle+'</p><p class="weui_cell_bd_smaller"><span>';
if(data[i].inscribe == 1){
appendhtml += data[i].departName+'</span><span class="releasetime">'+data[i].createTime.substring(0, 16)+'</span></p>';
}else{
appendhtml += data[i].createUser+'</span><span class="releasetime">'+data[i].createTime.substring(0, 16)+'</span></p>';
}
appendhtml+= '</div><div class="weui_cell_ft"></div></a>';
}
$(".YJSdetails").append(appendhtml);
}
},
complete:function(){
setTimeout(function() {
flag=true;
}, 500);
}
});
}else if(toggle=="send"){
$(".YJSdetails").css("display","none");
$(".YFSdetails").css("display","block");
$(".DFSdetails").css("display","none");
pagenumYFS=1;
console.log(pagenumYFS);
flag=false;
$.ajax({//已發送
type : "post",
url:cepPath + '/mobile/notice/getYFSNoticeList',
async:true,
data: {
pagenum: 0,
count: 10
},
//dataType:'json',
success:function(data){
var data = eval("(" + data +")");
if(data.length==0){
//缺省頁
$(".nodata-hint").show();
}else{
//將獲取到的數據append dom中
for(var i=0;i<data.length;i++){
appendhtml+='<a class="weui_cell" href="'+cepPath+'/mobile/notice/toNoticeDetail?noticeId='+data[i].id+'"><div class="weui_cell_bd weui_cell_primary">';
appendhtml+='<p>'+data[i].noticeTitle+'</p><p class="weui_cell_bd_smaller"><span>';
if(data[i].inscribe == 1){
appendhtml += data[i].departName+'</span><span class="releasetime">'+data[i].createTime.substring(0, 16)+'</span></p>';
}else{
appendhtml += data[i].createUser+'</span><span class="releasetime">'+data[i].createTime.substring(0, 16)+'</span></p>';
}
appendhtml+= '</div><div class="weui_cell_ft"></div></a>';
}
$(".YFSdetails").append(appendhtml);
}
},
complete:function(){
setTimeout(function() {
flag=true;
}, 500);
}
});
}else if(toggle=="wait"){
flag=false;
$(".YJSdetails").css("display","none");
$(".YFSdetails").css("display","none");
$(".DFSdetails").css("display","block");
//alert("待發")
pagenumDFS=1;
console.log(pagenumDFS);
$.ajax({
type : "post",
url:cepPath + '/mobile/notice/getDFSNoticeList',
async:true,
data: {
pagenum: 0,
count: 10
},
//dataType:'json',
success:function(data){
var data = eval("(" + data +")");
if(data.length==0){
//缺省頁
$(".nodata-hint").show();
}else{
//將獲取到的數據append dom中
for(var i=0;i<data.length;i++){
if(data[i].isSendOntime == 2){//定時發佈中跳詳情 不然跳編輯
appendhtml+='<a class="weui_cell" href="'+cepPath+'/mobile/notice/toNoticeDetail?noticeId='+data[i].id+'"><div class="weui_cell_bd weui_cell_primary">';
}else{
appendhtml+='<a class="weui_cell" href="'+cepPath+'/mobile/notice/toEditNotice?noticeId='+data[i].id+'"><div class="weui_cell_bd weui_cell_primary">';
}
//appendhtml+='<a class="weui_cell" href="'+cepPath+'/mobile/notice/toEditNotice?noticeId='+data[i].id+'"><div class="weui_cell_bd weui_cell_primary">';
appendhtml+='<p>'+data[i].noticeTitle+'</p><p class="weui_cell_bd_smaller"><span>';
if(data[i].inscribe == 1){
appendhtml += data[i].departName+'</span><span class="releasetime">'+data[i].createTime.substring(0, 16)+'</span></p>';
}else{
appendhtml += data[i].createUser+'</span><span class="releasetime">'+data[i].createTime.substring(0, 16)+'</span></p>';
}
if(data[i].isSendOntime == 2){ //定時發佈中
appendhtml+= '</div><div class="weui_cell_ft"><span class="weui_expand_flag_primary">發佈中</span></div></a>';
}else{
appendhtml+= '</div><div class="weui_cell_ft"><span class="weui_expand_flag_primary">草稿</span></div></a>';
}
}
$(".DFSdetails").append(appendhtml);
}
},
complete:function(){
setTimeout(function() {
flag=true;
}, 500);
}
});
}
});dom
//已接收滾動
function scrollreceived(){
console.log(pagenumYJS+"!!!!");
$(".loading").show();
$.ajax({
type:"post",
url:cepPath + '/mobile/notice/getYJSNoticeList',
async:true,
data: {
pagenum: pagenumYJS,
count: 10
},
//dataType:'json',
success:function(data){
var data = eval("(" + data +")");
if(data.length==0){
//$(document).off('scroll');
$(".footer").show();
}else{
//將獲取到的數據append dom中
appendhtml="";
//console.log(appendhtml);
for(var i=0;i<data.length;i++){
appendhtml+='<a class="weui_cell" href="'+cepPath+'/mobile/notice/toNoticeDetail?noticeId='+data[i].id+'"><div class="weui_cell_bd weui_cell_primary">';
appendhtml+='<p>'+data[i].noticeTitle+'</p><p class="weui_cell_bd_smaller"><span>';
if(data[i].inscribe == 1){
appendhtml += data[i].departName+'</span><span class="releasetime">'+data[i].createTime.substring(0, 16)+'</span></p>';
}else{
appendhtml += data[i].createUser+'</span><span class="releasetime">'+data[i].createTime.substring(0, 16)+'</span></p>';
}
appendhtml+= '</div><div class="weui_cell_ft"></div></a>';
}
$(".YJSdetails").append(appendhtml);
pagenumYJS += 1;
}
},
complete:function(){
setTimeout(function() {
flag=true;
}, 500);
$(".loading").hide(2000);
//pagenum++;
console.log(pagenumYJS+"~~~~");
}
});
}jsp
//已發送滾動
function scrollsend(){
$(".loading").show();
$.ajax({//已發
type:"post",
url:cepPath + '/mobile/notice/getYFSNoticeList',
async:true,
data: {
pagenum: pagenumYFS,
count: 10
},
//dataType:'json',
success:function(data){
var data = eval("(" + data +")");
// console.log(pagenumYFS);
// console.log(data.length);
if(data.length==0){
//$(document).off('scroll');
$(".footer").show();
}else{
//將獲取到的數據append dom中
appendhtml="";
//將獲取到的數據append dom中
for(var i=0;i<data.length;i++){
appendhtml+='<a class="weui_cell" href="'+cepPath+'/mobile/notice/toNoticeDetail?noticeId='+data[i].id+'"><div class="weui_cell_bd weui_cell_primary">';
appendhtml+='<p>'+data[i].noticeTitle+'</p><p class="weui_cell_bd_smaller"><span>';
if(data[i].inscribe == 1){
appendhtml += data[i].departName+'</span><span class="releasetime">'+data[i].createTime.substring(0, 16)+'</span></p>';
}else{
appendhtml += data[i].createUser+'</span><span class="releasetime">'+data[i].createTime.substring(0, 16)+'</span></p>';
}
appendhtml+= '</div><div class="weui_cell_ft"></div></a>';
}
$(".YFSdetails").append(appendhtml);
pagenumYFS += 1;
}
},
complete:function(){
setTimeout(function() {
flag=true;
}, 500);
$(".loading").hide(2000);
//pagenum++;
}
});
}async
//待發送滾動
function scrollwait(){
$(".loading").show();
$.ajax({
type:"post",
url:cepPath + '/mobile/notice/getDFSNoticeList',
async:true,
data: {
pagenum: pagenumDFS,
count: 10
},
//dataType:'json',
success:function(data){
var data = eval("(" + data +")");
if(data.length==0){
//$(document).off('scroll');
$(".footer").show();
}else{
//將獲取到的數據append dom中
appendhtml="";
//將獲取到的數據append dom中
for(var i=0;i<data.length;i++){
appendhtml+='<a class="weui_cell" href="'+cepPath+'/mobile/notice/toEditNotice?noticeId='+data[i].id+'"><div class="weui_cell_bd weui_cell_primary">';
appendhtml+='<p>'+data[i].noticeTitle+'</p><p class="weui_cell_bd_smaller"><span>';
if(data[i].inscribe == 1){
appendhtml += data[i].departName+'</span><span class="releasetime">'+data[i].createTime.substring(0, 16)+'</span></p>';
}else{
appendhtml += data[i].createUser+'</span><span class="releasetime">'+data[i].createTime.substring(0, 16)+'</span></p>';
}
if(data[i].isSendOntime == 2){ //定時發佈中
appendhtml+= '</div><div class="weui_cell_ft"><span class="weui_expand_flag_primary">發佈中</span></div></a>';
}else{
appendhtml+= '</div><div class="weui_cell_ft"><span class="weui_expand_flag_primary">草稿</span></div></a>';
}
}
$(".DFSdetails").append(appendhtml);
pagenumDFS += 1;
}
},
complete:function(){
setTimeout(function() {
flag=true;
}, 500);
$(".loading").hide(2000);
//pagenum++;
}
});
}
//滾動條滾動事件
function scrollbox(){
$(document).on("scroll",function(){
var viewH =$(window).height();//可見高度
var contentH =$(".box").height();//內容高度
var scrollTop =$("body").scrollTop();//滾動距離
console.log('scroll倍出發了');
if(flag){
if(contentH - viewH - scrollTop <=100) {
flag=false;
toggle=$(".active").attr("datatoggle");
//到達底部100px時,加載新內容
if(toggle=="receive"){//已接收
scrollreceived();
}else if(toggle=="send"){
scrollsend();
}else if(toggle=="wait"){
//alert("待發");
scrollwait();
}else{
return false;
}
}
else{
return false;
}
}
});
};
//初始化頁面(已接收)
function init(){
appendhtml="";
$(".YJSdetails").html("");
$.ajax({//已接收
type:"post",
url:cepPath + '/mobile/notice/getYJSNoticeList',
async:true,
data: {
pagenum: 0,
count: 10
},
//dataType:'json',
success:function(data){
var data = JSON.parse(data);
// console.log(data);
if(data.length==0){
//缺省頁
$(".nodata-hint").show();
}else{
//將獲取到的數據append dom中
for(var i=0;i<data.length;i++){
appendhtml+='<a class="weui_cell" href="'+cepPath+'/mobile/notice/toNoticeDetail?noticeId='+data[i].id+'"><div class="weui_cell_bd weui_cell_primary">';
appendhtml+='<p>'+data[i].noticeTitle+'</p><p class="weui_cell_bd_smaller"><span>';
if(data[i].inscribe == 1){
appendhtml += data[i].departName+'</span><span class="releasetime">'+data[i].createTime.substring(0, 16)+'</span></p>';
}else{
appendhtml += data[i].createUser+'</span><span class="releasetime">'+data[i].createTime.substring(0, 16)+'</span></p>';
}
appendhtml+= '</div><div class="weui_cell_ft"></div></a>';
}
$(".YJSdetails").append(appendhtml);
}
},
complete:function(){
setTimeout(function() {
flag=true;
}, 500);
}
});
}
//新增後初始化頁面(待發送)
function waitsend(){
$(".YJSdetails").css("display","none");
$(".YFSdetails").css("display","none");
$(".DFSdetails").css("display","block");
appendhtml="";
$(".DFSdetails").html("");
//console.log("222");
$.ajax({//待發送
type:"post",
url:cepPath + '/mobile/notice/getDFSNoticeList',
async:true,
data: {
pagenum: 0,
count: 10
},
//dataType:'json',
success:function(data){
var data = eval("(" + data +")");
if(data.length==0){
//缺省頁
$(".nodata-hint").show();
}else{
//將獲取到的數據append dom中
for(var i=0;i<data.length;i++){
if(data[i].isSendOntime == 2){//定時發佈中跳詳情 不然跳編輯
appendhtml+='<a class="weui_cell" href="'+cepPath+'/mobile/notice/toNoticeDetail?noticeId='+data[i].id+'"><div class="weui_cell_bd weui_cell_primary">';
}else{
appendhtml+='<a class="weui_cell" href="'+cepPath+'/mobile/notice/toEditNotice?noticeId='+data[i].id+'"><div class="weui_cell_bd weui_cell_primary">';
}
appendhtml+='<p>'+data[i].noticeTitle+'</p><p class="weui_cell_bd_smaller"><span>';
if(data[i].inscribe == 1){
appendhtml += data[i].departName+'</span><span class="releasetime">'+data[i].createTime.substring(0, 16)+'</span></p>';
}else{
appendhtml += data[i].createUser+'</span><span class="releasetime">'+data[i].createTime.substring(0, 16)+'</span></p>';
}
if(data[i].isSendOntime == 2){ //定時發佈中
appendhtml+= '</div><div class="weui_cell_ft"><span class="weui_expand_flag_primary">發佈中</span></div></a>';
}else{
appendhtml+= '</div><div class="weui_cell_ft"><span class="weui_expand_flag_primary">草稿</span></div></a>';
}
}
$(".DFSdetails").append(appendhtml);
}
},
complete:function(){
setTimeout(function() {
flag=true;
}, 500);
}
});
}
//頁面加載
$(function(){
//滾動條滾動調用
$('.box').css({
'min-height': window.innerHeight + 10 + 'px'
})
scrollbox();
var local=getlocalStoragearam("notice");
if(local=="waitsend"){
$(".waitsend").siblings().removeClass("active");
$(".waitsend").addClass("active");
waitsend();
window.localStorage.clear();
}else{
init();
}
})
//跳轉到新增 function createNotice(){ writelocalStoragearam("notice","waitsend"); window.location.href=cepPath+'/mobile/notice/toAddNotice'; }
- 1. tab欄切換
- 2. jQuery-tab切換
- 3. vue tab切換
- 4. tab切換
- 5. demo-tab切換
- 6. iframe，tab切換
- 7. tab切換js
- 8. tab切換組件nz-tab
- 9. tab切換效果，滑動tab 點擊切換tab標籤
- 10. jQuery---tab欄切換
- 更多相關文章...
- • ionic 加載動作 - ionic 教程
- • ionic 加載動畫 - ionic 教程
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
- • Github 簡明教程
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. Window下Ribbit MQ安裝
- 2. Linux下Redis安裝及集羣搭建
- 3. shiny搭建網站填坑戰略
- 4. Mysql8.0.22安裝與配置詳細教程
- 5. Hadoop安裝及配置
- 6. Python爬蟲初學筆記
- 7. 部署LVS-Keepalived高可用集羣
- 8. keepalived+mysql高可用集羣
- 9. jenkins 公鑰配置
- 10. HA實用詳解
- 1. tab欄切換
- 2. jQuery-tab切換
- 3. vue tab切換
- 4. tab切換
- 5. demo-tab切換
- 6. iframe，tab切換
- 7. tab切換js
- 8. tab切換組件nz-tab
- 9. tab切換效果，滑動tab 點擊切換tab標籤
- 10. jQuery---tab欄切換