JavaScript
搜索
分类

swiper4实现移动端导航切换

作者：葉幺 时间：2024-07-28 23:40:27　

本文实例为大家分享了swiper4实现移动端导航切换的具体代码，供大家参考，具体内容如下

swiper4实现移动端导航切换

首先导入

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">
<h3>商品分类</h3>
</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">
<h3>商品分类</h3>
</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>

来源：https://blog.csdn.net/weixin_42861240/article/details/81874275

标签：swiper4,移动端,导航
0
投稿

猜你喜欢

  • python实现Nao机器人的单目测距

    2021-04-09 16:37:10

  • CSS文件的编码要和页面的编码相一致

    2010-06-06 13:59:00

  • pycharm中连接mysql数据库的步骤详解

    2024-01-19 22:22:40

  • python统计一个文本中重复行数的方法

    2021-08-20 12:50:46

  • 解决PyCharm 中写 Turtle代码没提示以及标黄的问题

    2023-05-12 09:08:30

  • 使用python-opencv读取视频,计算视频总帧数及FPS的实现

    2022-02-03 06:55:34

  • Python集合的增删改查操作

    2023-09-30 00:48:18

  • 基于python利用Pyecharts使高清图片导出并在PPT中动态展示

    2021-02-23 13:02:39

  • Microsoft Sql server2005的安装步骤图文详解及常见问题解决方案

    2024-01-22 07:23:00

  • TinkerPop框架查询Gremlin图实现过程详解

    2024-01-29 11:26:45

  • 建立用户体验过程的实用指南

    2007-11-19 12:53:00

  • python pandas 数据排序的几种常用方法

    2021-10-02 06:25:01

  • 利用python将图片版PDF转文字版PDF

    2021-07-20 21:22:25

  • MySQL索引数据结构入门详细教程

    2024-01-25 02:02:42

  • 小程序点餐界面添加购物车左右摆动动画

    2024-04-27 15:22:36

  • 使用vue.js实现checkbox的全选和多个的删除功能

    2024-04-10 10:32:00

  • Scrapy-Redis结合POST请求获取数据的方法示例

    2023-08-25 06:31:56

  • SQL SERVER的字段类型介绍

    2008-05-23 13:27:00

  • 从浅入深带你掌握Golang数据结构map

    2023-06-21 16:42:43

  • Golang命令行进行debug调试操作

    2024-04-27 15:37:33
    • asp之家 网络编程 m.aspxhome.com