溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這期內容當中小編將會給大家帶來有關使用swiper4怎么實現一個移動端導航切換功能，文章內容豐富且以專業的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。
首先導入
<link rel="stylesheet" href="css/swiper.min.css" > <script src="js/jquery-1.10.1.min.js"></script> <script src="js/swiper.min.js"></script>(這里用的是Swiper 4.0.7版本)
在寫入html內容
<div id=header> <div class="head-top"> <h4>商品分類</h4> </div> <div id="nav" class="swiper-container"> <ul class="swiper-wrapper"> <li class="swiper-slide active-nav"><a href="javascript:;" >手機</a></li> <li class="swiper-slide"><a href="javascript:;">廚具</a></li> <li class="swiper-slide"><a href="javascript:;">數碼</a></li> <li class="swiper-slide"><a href="javascript:;">家紡</a></li> <li class="swiper-slide"><a href="javascript:;">生鮮</a></li> <li class="swiper-slide"><a href="javascript:;">家用電器</a></li> <li class="swiper-slide"><a href="javascript:;">食品飲料</a></li> <li class="swiper-slide"><a href="javascript:;">電腦/辦公</a></li> <li class="swiper-slide"><a href="javascript:;">家用日用</a></li> </ul> </div> </div> <div id="page" class="swiper-container" id="page"> <div class="swiper-wrapper"> <div class="swiper-slide slidepage">手機</div> <div class="swiper-slide slidepage">廚具</div> <div class="swiper-slide slidepage">數碼</div> <div class="swiper-slide slidepage">家紡</div> <div class="swiper-slide slidepage">生鮮</div> <div class="swiper-slide slidepage">家用電器</div> <div class="swiper-slide slidepage">食品飲料</div> <div class="swiper-slide slidepage">電腦/辦公</div> <div class="swiper-slide slidepage">家用日用</div> </div> </div>
最后調用swiper
<script>
var myNav = new Swiper('#nav', {
spaceBetween: 10,
slidesPerView : 3,
watchSlidesProgress : true,
watchSlidesVisibility : true,
on:{
tap: function(){
myPage.slideTo( myNav.clickedIndex)
}
}
})
var myPage = new Swiper('#page',{
on:{
slideChangeTransitionStart: function(){
updateNavPosition()
}}
})
function updateNavPosition(){
$('#nav .active-nav').removeClass('active-nav');
var activeNav = $('#nav .swiper-slide').eq(myPage.activeIndex).addClass('active-nav');
if (!activeNav.hasClass('swiper-slide-visible')) {
console.log(1);
if (activeNav.index()>myNav.activeIndex) {
console.log(2);
var thumbsPerNav = Math.floor(myNav.width/activeNav.width())-1
myNav.slideTo(activeNav.index()-thumbsPerNav)
}
else {
console.log(3);
myNav.slideTo(activeNav.index())
}
}
}
</script>全部代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>商品分類</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<link rel="stylesheet" href="css/swiper.min.css" >
<script src="js/jquery-1.10.1.min.js"></script>
<script src="js/swiper.min.js"></script>
<style>
*{padding:0;margin:0;font-size:20px;color:#333;}
html{background:#fff;}
a{text-decoration:none;}
body{max-width:640px;margin:0 auto;position:relative;background:#ccc;overflow:hidden;}
img{width:100%;border:0;}
li{list-style:none;}
.head-top{height:36px;position:fixed;top:0;left:0;text-align:center;width:100%;line-height:36px;}
.swiper-containee{max-width:640px;}
#nav{margin-top:36px;border-bottom:1px solid #999;padding:10px;}
#nav li{text-align:center;}
.active-nav{
color:#fff;
background:#ddd !important;
}
.active-nav a{
color:#fff;
background:#ddd !important;
}
#page .swiper-slide{height:6rem;}
</style>
</head>
<body>
<div id=header>
<div class="head-top">
<h4>商品分類</h4>
</div>
<div id="nav" class="swiper-container">
<ul class="swiper-wrapper">
<li class="swiper-slide"><a href="javascript:;" >手機</a></li>
<li class="swiper-slide"><a href="javascript:;" >廚具</a></li>
<li class="swiper-slide"><a href="javascript:;" >數碼</a></li>
<li class="swiper-slide"><a href="javascript:;" >家紡</a></li>
<li class="swiper-slide"><a href="javascript:;" >生鮮</a></li>
<li class="swiper-slide"><a href="javascript:;" >家用電器</a></li>
<li class="swiper-slide"><a href="javascript:;" >食品飲料</a></li>
<li class="swiper-slide"><a href="javascript:;" >電腦/辦公</a></li>
<li class="swiper-slide"><a href="javascript:;" >家用日用</a></li>
</ul>
</div>
</div>
<div id="page" class="swiper-container" id="page">
<div class="swiper-wrapper">
<div class="swiper-slide slidepage">手機</div>
<div class="swiper-slide slidepage">廚具</div>
<div class="swiper-slide slidepage">數碼</div>
<div class="swiper-slide slidepage">家紡</div>
<div class="swiper-slide slidepage">生鮮</div>
<div class="swiper-slide slidepage">家用電器</div>
<div class="swiper-slide slidepage">食品飲料</div>
<div class="swiper-slide slidepage">電腦/辦公</div>
<div class="swiper-slide slidepage">家用日用</div>
</div>
</div>
<script>
var myNav = new Swiper('#nav', {
spaceBetween: 10,
slidesPerView : 3,
watchSlidesProgress : true,
watchSlidesVisibility : true,
on:{
tap: function(){
myPage.slideTo( myNav.clickedIndex)
}
}
})
var myPage = new Swiper('#page',{
on:{
slideChangeTransitionStart: function(){
updateNavPosition()
}}
})
function updateNavPosition(){
$('#nav .active-nav').removeClass('active-nav');
var activeNav = $('#nav .swiper-slide').eq(myPage.activeIndex).addClass('active-nav');
if (!activeNav.hasClass('swiper-slide-visible')) {
console.log(1);
if (activeNav.index()>myNav.activeIndex) {
console.log(2);
var thumbsPerNav = Math.floor(myNav.width/activeNav.width())-1
myNav.slideTo(activeNav.index()-thumbsPerNav)
}
else {
console.log(3);
myNav.slideTo(activeNav.index())
}
}
}
</script>
</body>
</html>上述就是小編為大家分享的使用swiper4怎么實現一個移動端導航切換功能了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
