swiper4实现移动端导航切换的方法_F11 - 专业站长和开发者的学习网站

分享到

swiper4实现移动端导航切换的方法

JavaScript 来源：互联网搜集作者：秩名发布时间：2019-09-08 15:15:12 人浏览

摘要

具体效果如下：首先导入 link rel=stylesheet href=css/swiper.min.css script src=js/jquery-1.10.1.min.js/scriptscript src=js/swiper.min.js/script(这里用的是Swiper 4.0.7版本) 在写入html内容 div id=header div class=head-top h3商品分类/h3 /div

具体效果如下：

首先导入

<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

Tag : 切换(33)移动端(97)导航(18)

Fabric.js实现变换视窗的示例介绍

引言 fabric.js可以通过viewportTransform属性配置画布的视窗属性。听上去很高级的样子，但其实这是原生canvas就已经存在的东西，fabric.js的vie
Vue.js前端路由和异步组件的介绍

文章目标 P6 针对react/vue能够根据业务需求口喷router的关键配置，包括但不限于：路由的匹配规则、路由守卫、路由分层等；能够描述清楚
Vue.js状态管理及SSR解析介绍

前端状态管理出现的意义及解决的问题随着前端应用的逐步复杂，我们的组件中需要使用越来越多的状态。有的时候我们需要使用子组件将
React项目中使用Redux的react-redux

背景在前面文章一文理解Redux及其工作原理中，我们了解到redux是用于数据状态管理，而react是一个视图层面的库如果将两者连接在一起，可
javascript手机验证、邮箱验证、密码验证的正则表

javascript【手机验证】、【邮箱验证】、【密码验证】的正则表达式的封装：【手机验证】：以下代码是验证手机号码的正则表达式的方法，
Jest如何支持异步及时间函数的实现

异步支持在前端开发中，我们会遇到很多异步代码，那么就需要测试框架对异步必须支持，那如何支持呢？ Jest 支持异步有两种方式：回调
JavaScript对象新增方法defineProperty与keys的使用说明

这两个方法可以让我们更方便的操作对象，获取对象属性，赋值修改等等操作，最重要的是，这些方法可以让我们设置无法修改对象属性值
vue+elementUI封装一个根据后端变化的动态table(完整

效果图：使用组件，启用自动生成 :auto=true 自动生成-编辑（包括请求已经实现了）新增和删除也是一样 ps:如有额外的按钮可以用插槽实现
js数组去重常见的方法汇总(7种)

1、借助ES6提供的Set结构 new Set() 简单好用强烈推荐直接给一个新的数组里面，利用es6的延展运算符 1 2 3 4 5 6 7 8 9 var arr = [1,9,8,8,7,2,5,3,3,3,
Vue移动端实现调用相机扫描二维码或条形码的全

一、开发前的准备实现二维码或条形码的扫描识别比较普遍的做法是去调用微信 JS-SDK 的扫一扫功能（详见概述 | 微信开放文档），或者支