时间:2021-05-26
本文实例为大家分享了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>以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
swiper4移动端导航栏tab滑动切换效果,供大家参考,具体内容如下效果如图:首先引入swiper的css和js文件官网下载地址html结构部分slider1
版本选择swiper是个常用的插件,现在已经迭代到了第四代:swiper4。常用的版本是swiper3和swiper4,我选择的是swiper3。安装安装swi
使用Swiper开发移动端页面,轻松实现图片的轮播。swiper1.主要包含模块:swiper:指滑动、切换(整个滑动对象,有时特指滑块释放后仍然正向移动直到贴
本文实例为大家分享了swiper实现导航滚动效果的具体代码,供大家参考,具体内容如下1.需求:点击导航科目,选中元素自动往前滑动处于中间位置,tab切换推荐Re
微信小程序swiper制作tab切换实现效果图:swiper制作tab切换index.htmlSeside1Seside2Seside3Seside1Sesid