|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>搜索-科袖网</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" href="../css/bootstrap.min.css" />
<link rel="stylesheet" href="../css/reset.css" />
<link rel="stylesheet" href="../css/common.css" />
<link rel="stylesheet" href="../css/swiper.min.css" />
<link rel="stylesheet" href="../css/share.css" />
<script type="text/javascript" src="../js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="../js/public/swiper.min.js"></script>
<script type="text/javascript" src="../js/public/shareCom.js"></script>
<style type="text/css">
.tab{display: flex;line-height: 40px;position: fixed;top: 40px;width: 100%;z-index: 10;border-bottom: 1px #ccc solid;}
.tab a{width: 33.333333%;background: #fff;text-align: center;}
.tab .active{border-bottom: 1px #f50 solid; color: #f50;}
.panel{margin: 0;}
.refreshtip {position: absolute;left: 0;width: 100%;margin: 10px 0;text-align: center;color: #999;}
.swiper-container{overflow: visible;}
.loadtip { display: block;width: 100%;line-height: 40px; height: 40px;text-align: center;color: #999;}
.swiper-container, .w{height: calc(100vh - 0px);}
.swiper-slide{height: auto;}
.text-center{text-align: center;}
</style>
</head>
<body>
<div class="contentBody2">
<div class="searchBox">
<form onsubmit="return false;" id="searB">
<input type="search" class="form-control" placeholder="请输入关键词" id="searchval" />
</form>
<div class="rightnav filtered displayNone" id="sele">
<a class="mui-icon iconfont icon-filter"><span class="mui-badge" id="seler" style="display:none;"></span></a><br />筛选
</div>
</div>
<!--<div class="tab">
<a class="active" href="javascript:;">找专家</a>
<a href="javascript:;">找企业</a>
<a href="javascript:;">找资源</a>
</div>-->
<div class="swiper-container-tab">
<div class="swiper-wrapper swiper-wrapper-tab">
<ul>
<li class="swiper-slide swiper-slide-tab active-tab">找专家</li>
<li class="swiper-slide swiper-slide-tab">找企业</li>
<li class="swiper-slide swiper-slide-tab">找资源</li>
<li class="swiper-slide swiper-slide-tab">找专利</li>
<li class="swiper-slide swiper-slide-tab">找论文</li>
<li class="swiper-slide swiper-slide-tab">找文章</li>
</ul>
</div>
</div>
<div class="swiper-container madiaBlock swiper-container-main">
<div class="refreshtip">下拉可以刷新</div>
<div class="swiper-wrapper swiper-wrapper-main w">
<div class="swiper-slide d">
<div class="init-loading list-group-item text-center" style="display: none;">下拉可以刷新</div>
<div class="swiper-container2">
<div class="swiper-wrapper">
<div class="swiper-slide list-group">
<ul class="mui-table-view" id="proList">
</ul>
</div>
<div class="swiper-slide list-group">
<ul class="mui-table-view" id="companyList">
</ul>
</div>
<div class="swiper-slide list-group">
<ul class="mui-table-view" id="resourceList">
</ul>
</div>
<div class="swiper-slide list-group">
<ul class="mui-table-view" id="patentList">
</ul>
</div>
<div class="swiper-slide list-group">
<ul class="mui-table-view" id="paperList">
</ul>
</div>
<div class="swiper-slide list-group">
<ul class="mui-table-view" id="articleList">
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="loadtip">上拉加载更多</div>
<div class="swiper-scrollbar"></div>
</div>
</div>
<script src="../js/search_h5.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var mySwiperTab = new Swiper('.swiper-container-tab',{
freeMode : true,
freeModeMomentum : false,
freeModeMomentumBounce : false,
freeModeMomentumRatio : 5,
touchRatio : 0.5,
})
var loadFlag = true;
var oi = 0;
var mySwiper = new Swiper('.swiper-container-main',{
direction: 'vertical',
scrollbar: '.swiper-scrollbar',
slidesPerView: 'auto',
mousewheelControl: true,
freeMode: true,
onTouchMove: function(swiper){ //手动滑动中触发
var _viewHeight = document.getElementsByClassName('swiper-wrapper-main')[0].offsetHeight;
var _contentHeight = document.getElementsByClassName('swiper-slide')[0].offsetHeight;
if(mySwiper.translate < 50 && mySwiper.translate > 0) {
$(".init-loading").html('下拉刷新...').show();
}else if(mySwiper.translate > 50 ){
$(".init-loading").html('释放刷新...').show();
}
},
onTouchEnd: function(swiper) {
var _viewHeight = document.getElementsByClassName('swiper-wrapper-main')[0].offsetHeight;
var _contentHeight = document.getElementsByClassName('swiper-slide')[0].offsetHeight;
// 上拉加载
if(mySwiper.translate <= _viewHeight - _contentHeight - 50 && mySwiper.translate < 0) {
if(loadFlag){
$(".loadtip").html('正在加载...');
}else{
$(".loadtip").html('没有更多啦！');
}
setTimeout(function() {
for(var i = 0; i <5; i++) {
oi++;
$(".list-group").eq(mySwiper2.activeIndex).append('<li class="list-group-item">我是加载出来的'+oi+'...</li>');
}
$(".loadtip").html('上拉加载更多...');
mySwiper.update(); // 重新计算高度;
}, 800);
}
// 下拉刷新
if(mySwiper.translate >= 50) {
$(".init-loading").html('正在刷新...').show();
$(".loadtip").html('上拉加载更多');
loadFlag = true;
setTimeout(function() {
$(".refreshtip").show(0);
$(".init-loading").html('刷新成功！');
setTimeout(function(){
$(".init-loading").html('').hide();
},800);
$(".loadtip").show(0);
//刷新操作
mySwiper.update(); // 重新计算高度;
}, 1000);
}else if(mySwiper.translate >= 0 && mySwiper.translate < 50){
$(".init-loading").html('').hide();
}
return false;
}
});
var mySwiper2 = new Swiper('.swiper-container2',{
onTransitionEnd: function(swiper){
$('.w').css('transform', 'translate3d(0px, 0px, 0px)')
$('.swiper-container2 .swiper-slide-active').css('height','auto').siblings('.swiper-slide').css('height','0px');
mySwiper.update();
$('.swiper-slide-tab').eq(mySwiper2.activeIndex).addClass('active-tab').siblings('li').removeClass('active-tab');
}
});
$('.swiper-slide-tab').click(function(){
$(this).addClass('active-tab').siblings('li').removeClass('active-tab');
mySwiper2.slideTo($(this).index(), 500, false)
$('.w').css('transform', 'translate3d(0px, 0px, 0px)')
$('.swiper-container2 .swiper-slide-active').css('height','auto').siblings('.swiper-slide').css('height','0px');
mySwiper.update();
});
</script>
</body>
</html>
|
