在移动端如何用swiper实现导航栏效果
Posted IT-忐忑
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了在移动端如何用swiper实现导航栏效果相关的知识，希望对你有一定的参考价值。
我们在写移动端的时候会有滑动和点击导航后滑动到目标页面功能；而这个功能如果自己写的话会很麻烦，所以我在这推荐一下swiper这个插件。
其实swiper中的官网中也有这种功能的实现，但是我认为是有点麻烦的。而我在网上也没找到。所以我通过查找和研究弄出了这种方法（也可能有人这么用了）；
话不多说，上代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/swiper.min.css"/> <style type="text/css"> .swiper-container{/*把主要的框写好*/ width:400px; height:400px; border:1px solid #aaa; } .swiper-slide{/*轮播的内容*/ width:100%; height:100%; text-align: center; line-height: 400px; } .swiper-pagination{/*装有小圆点的容器,把它移动到顶部，不过top为零时容易把内容覆盖一部分，所以减去小圆点的高度*/ border-bottom: 1px solid #aaa; width:100%; height:40px; display: flex; top:0; } .swiper-pagination-bullet-active{/*这个是被选取得当前的小圆点的样式*/ color:#808080; } .swiper-pagination-bullet{/*这个是小圆点的样式*/ background:transparent;/*背景色设置为需要的背景*/ -webkit-flex-grow: 1;/*这个就不用解释了吧，就是平均分配的弹性盒*/ text-align: center; line-height: 40px; border-radius: 0;/*把小圆点重新设置为矩形*/ height: 40px; color:#000000; } .swiper-pagination-bullet:nth-child(1):before{/*在元素的内容之前插入新内容;*/ content:"Slide 1";/*所插入的内容*/ } .swiper-pagination-bullet:nth-child(2):before{ content:"Slide 2"; } .swiper-pagination-bullet:nth-child(3):before{ content:"Slide 3"; } .swiper-pagination-bullet:nth-child(4):before{ content:"Slide 4"; } .swiper-pagination-bullet:nth-child(5):before{ content:"Slide 5"; } </style> </head> <body> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> <div class="swiper-slide">Slide 4</div> <div class="swiper-slide">Slide 5</div> </div> <!-- Add Pagination --> <div class="swiper-pagination"></div> </div> </body> </html> <script src="js/swiper.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> window.onload = function(){ var swiper = new Swiper(".swiper-container", { pagination: ".swiper-pagination",//显示小圆点 autoplay:2000, //轮播毫秒数 loop:true, //可以重复轮播，默认方式是false paginationClickable: true, //值为真时，当单击指示器时会执行过渡动画到目标slide speed:300, //slides滑动动画之间的持续时间 autoplayDisableOninteraction:true,//autoplay不会被禁掉，用户操作之后每次都会重新启动autoplay // mode:‘horizontal‘, //slides滑动方式，水平或垂直 }); } </script>
这中方法我认为是非常简单的。希望对大家有用
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><link rel="stylesheet" type="text/css" href="css/swiper.min.css"/><style type="text/css">.swiper-container{/*把主要的框写好*/width:400px;height:400px;border:1px solid #aaa;}.swiper-slide{/*轮播的内容*/width:100%;height:100%;text-align: center;line-height: 400px;}.swiper-pagination{/*装有小圆点的容器,把它移动到顶部，不过top为零时容易把内容覆盖一部分，所以减去小圆点的高度*/border-bottom: 1px solid #aaa;width:100%;height:40px;display: flex;top:0;}.swiper-pagination-bullet-active{/*这个是被选取得当前的小圆点的样式*/color:#808080;}.swiper-pagination-bullet{/*这个是小圆点的样式*/background:transparent;/*背景色设置为需要的背景*/-webkit-flex-grow: 1;/*这个就不用解释了吧，就是平均分配的弹性盒*/text-align: center;line-height: 40px;border-radius: 0;/*把小圆点重新设置为矩形*/height: 40px;color:#000000;}.swiper-pagination-bullet:nth-child(1):before{/*在元素的内容之前插入新内容;*/content:"Slide 1";/*所插入的内容*/}.swiper-pagination-bullet:nth-child(2):before{content:"Slide 2";}.swiper-pagination-bullet:nth-child(3):before{content:"Slide 3";}.swiper-pagination-bullet:nth-child(4):before{content:"Slide 4";}.swiper-pagination-bullet:nth-child(5):before{content:"Slide 5";}</style></head><body><div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> <div class="swiper-slide">Slide 4</div> <div class="swiper-slide">Slide 5</div> </div> <!-- Add Pagination --> <div class="swiper-pagination"></div> </div></body></html><script src="js/swiper.min.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">window.onload = function(){ var swiper = new Swiper(".swiper-container", { pagination: ".swiper-pagination",//显示小圆点 autoplay:2000, //轮播毫秒数 loop:true, //可以重复轮播，默认方式是false paginationClickable: true, //值为真时，当单击指示器时会执行过渡动画到目标slide speed:300, //slides滑动动画之间的持续时间 autoplayDisableOninteraction:true,//autoplay不会被禁掉，用户操作之后每次都会重新启动autoplay// mode:‘horizontal‘, //slides滑动方式，水平或垂直 });}</script>
以上是关于在移动端如何用swiper实现导航栏效果的主要内容，如果未能解决你的问题，请参考以下文章