移动端滑动点击导航栏首页 （使用swiper，anime，layui）
最近发现了swiper，anime 两个插件发现开发H5页面还蛮好用的，组合起来写了一个手机导航栏首页
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
<title>姜大侠</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script src="./swiper-3.4.2.jquery.min.js"></script>
<link rel="stylesheet" href="./swiper-3.4.2.min.css">
<link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui-v2.5.6/css/layui.css" />
<script src="./anime.min.js"></script>
</head>
<body>
<style>
*{
-webkit-text-size-adjust: none;
}
html,body{
width: 100%; height: 100%;font-size: 12px; overflow: scroll;}
html::-webkit-scrollbar, body::-webkit-scrollbar{
width:0px;height:0px;}
body{
margin:0;}
a {
color: #3E3A3A;}
.div-uo {
text-align: center;
line-height: 45px;
background-color: #ffffff;
font-size: 12px;
/* border-radius: 118px; */
}
.cssp{
transform: scale(1.2);
color: #1E9FFF;
}
.swiper-divx div{
margin-top: 20px;
}
body {
background-color: rgba(90, 144, 255, 0.1);
}
.toapplyfor{
background-color:#007bff;
position: relative;
border-radius: 100px;
height: 50px;
width: 50px;
text-align: center;
line-height: 50px;
color: #fff;
border: 1px solid;
}
.toappbutto{
background-color: #007bff;
position: relative;
border-radius: 10px;
height: 50px;
width: 200px;
text-align: center;
line-height: 50px;
color: #fff;
margin-top: 40px;
border: 1px solid;
}
.toapp{
position: fixed;
width: 100%;
bottom: 100px;
height: auto;
z-index: 100;
text-align: center;
left: 40%;
display: none;
}
.investment_con_list {
display: none;
}
.tapbutton {
background-color: #ffff;
text-align: center;
line-height: 40px;
height: 40px;
}
.content {
width: 100%;
height: 400px;
background-color: #FFFFFF;
border-radius: 10px;
box-shadow: 0px 0px 10px 2px #A9A9A9;
margin-top: 45px;
}
.borderr {
border-radius: 10px 0px 0px 10px;
}
.connect {
color: #6c757d;
/*font-size: 10px;*/
text-align: center;
}
.bold {
font-weight: bold;
/*font-size: 12px;*/
}
.ser_content {
width: 100%;
height: 130px;
background-color: #ffffff;
border-radius: 15px;
margin-top: 15px;
}
.ser_top {
margin-top: 10px;
}
.ser_auxiliary,
.ser_describe {
margin-top: 5px;
color: #A5A6A5;
}
.ser_describe {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ser_fuwu {
width: 15px;
height: 15px;
position: relative;
}
.ser_type {
text-align: end;
margin-top: 5px;
font-weight: 600;
}
#complete {
position: relative;
top: 10px;
}
.imgegzwsj{
width: 70%;
position: absolute;
top: 50%;
left: 50%;
margin-top: -55%;
margin-left: -35%;
}
</style>
<div class="layui-container">
<div class="layui-row " id="ull" style="margin-top:20px;">
<div class="layui-col-xs3 div-uo" style="border-radius: 10px 0px 0px 10px;" onclick="switchl(0)">
<p class="cssp">全部</p>
</div>
<div class="layui-col-xs3 div-uo" onclick="switchl(1)">
<p>处理中</p>
</div>
<div class="layui-col-xs3 div-uo" onclick="switchl(2)">
<p>处理结束</p>
</div>
<div class="layui-col-xs3 div-uo" style="border-radius: 0px 10px 10px 0px;" onclick="switchl(3)">
<p>暂存草稿</p>
</div>
</div>
</div>
</div>
<div class="layui-container">
<div class="yuingf" style="text-align: center;position: relative;width:25%;top: -15px;line-height: 0px;color: cornflowerblue;height: 10px;font-weight: 600;">_____</div>
</div>
<div class="swiper-container" id="swip" style="height: 88%">
<div class="investment_con swiper-wrapper">
<div class="swiper-slide layui-container">
<div id="all" style="height: 100%;overflow:auto;">
<div class="layui-col-xs12" style="height: 1500px;background-color: #cccccc;"></div>
</div>
</div>
<div class="swiper-slide layui-container">
<div id="processing" style="height: 100%;overflow:auto;">
<div class="layui-col-xs12" style="height: 1500px;background-color: #0f0;"></div>
</div>
</div>
<div class="swiper-slide layui-container">
<div id="processingend" style="height: 100%;overflow:auto;">
<div class="layui-col-xs12" style="height: 1500px;background-color: red;"></div>
</div>
</div>
<div class="swiper-slide layui-container">
<div id="draftinsstorage" style="height: 100%;overflow:auto;">
<div class="layui-col-xs12" style="height: 1500px;background-color:indianred;"></div>
</div>
</div>
</div>
</div>
<div id="service" class="toapp">
<button class="toapplyfor layui-btn" type="button" id="servicebutton" onclick=javascrtpt:jumpset(this,6)></button>
</div>
<script src="https://www.layuicdn.com/layui-v2.5.6/layui.js"></script>
<script>
var mySwiper = new Swiper('.swiper-container',{
// autoHeight: true,
onSlideChangeEnd: function(swiper){
console.log(swiper.activeIndex); //切换结束时，告诉我现在是第几个slide
switchall.action(swiper.activeIndex);//导航栏动画
},
});
function switchl(i){
mySwiper.slideTo(i, 1000, false);
switchall.onclasschall(i);
switchall.action(i);
}
let t1 = 0;
let t2 = 0;
let timer = null; // 定时器
let timerm = null;
//监听滚动条事件
$("#all,#processing,#processingend,#draftinsstorage").on("scroll",function() {
clearTimeout(timerm);//开始时取消定时器
clearTimeout(timer);//开始时取消定时器
timer = setTimeout(isScrollEnd, 1000);
t1 = document.documentElement.scrollTop || document.body.scrollTop;
// console.log($($(this).children('div').get(0)).position().top);
let y = $($(this).children('div').get(0)).position().top;
scrollbar.scrollbarjudgment(y);
});
// 监听滚动条结束事件
function isScrollEnd() {
t2 = document.documentElement.scrollTop || document.body.scrollTop;
if (t2 == t1){
if(scrollbar.state){
return
}else {
scrollbar.scrollbarshrinkage();
}
timerm = setTimeout("scrollbar.scrollbaranimation()",4000);//开始定时执行弹出动画
}
}
//动画对象
const scrollbar = {
state:true,
stata:null,
//上下显示
scrollbarjudgment:function(y) {
if(y>=-20){
this.disappear();
}else if(y<=-100){
this.givetheworld();
}
},
// 弹出动画
scrollbaranimation:function () {
if(this.state){
return;
}else {
ame();
}
},
// 缩回动画
scrollbarshrinkage:function () {
$('#servicebutton').html("+");
anime({
targets: '#servicebutton',
left: '0%',
width: '50px',
backgroundColor: '#007bff',
// easing: 'easeInOutQuad',
duration: 100,
borderRadius: ['0%', '50%'],
changeComplete:function(){
$("#servicebutton").css("border-radius","100px");
$(".toapplyfor").css("opacity","1.5");
},
changeBegin: function() {
$('#servicebutton').html("+");
},
});
},
//隐藏
disappear:function(){
$("#service").fadeOut();
$("#servicebutton").css({
"border-radius":"100px","width":"50px","left":"0px"});
},
//显示
givetheworld:function () {
$("#service").fadeIn();
this.state=false;
}
};
//切换swit页
const switchall ={
ctuino:{
"one":0,
"two":1,
"three":2,
"four":3,
},
onclasschall:function(activeIndex){
$($("#ull").find("p")).removeClass("cssp");
$($($("#ull").children("div")[activeIndex]).find("p")).addClass("cssp");
if($("#processing").children().length==0){
$("#processing").append(htmlppo);
return
}
if($("#processingend").children().length==0){
$("#processingend").append(htmlppo);
return
}
if($("#draftinsstorage").children().length==0){
$("#draftinsstorage").append(htmlppo);
return
}
if($("#all").children().length==0){
$("#all").append(htmlppo);
return
}
},
action:function(i) {
$($("#ull").find("p")).removeClass("cssp");
switch(i){
case this.ctuino.one:
var ell = anime({
targets: '.yuingf ',
left: '0%',
easing: 'easeInOutQuad',
duration: 200
});
break;
case this.ctuino.two:
var ell = anime({
targets: '.yuingf ',
left: '25%',
easing: 'easeInOutQuad',
duration: 200
});
break;
case this.ctuino.three:
var ell = anime({
targets: '.yuingf ',
left: '50%',
easing: 'easeInOutQuad',
duration: 200
});
break;
case this.ctuino.four:
var ell = anime({
targets: '.yuingf ',
left: '75%',
easing: 'easeInOutQuad',
duration: 200
});
break;
}
}
}
//没办法只能把你赶出来了
function ame(){
anime({
targets: '#servicebutton',
left: '-40%',
width: '60%',
easing: 'spring(1, 80, 10, 0)',
duration: 100,
// borderRadius: ['50%', '0%'],
changeComplete:function(){
$(".toapplyfor").css("opacity","0.5");
$("#servicebutton").css("border-radius","10px")
$("#servicebutton").html("服务申请");
}
});
}
</script>
</body>
</html>
样式可以自己调整里面有许多多余的CSS样式没有删除（本人比较懒）
里面自有注释，随自己喜好扩展