编程 Javascript

swiper4实现移动端导航栏tab滑动切换

Posted in Javascript onOctober 16, 2020

swiper4移动端导航栏tab滑动切换效果，供大家参考，具体内容如下

效果如图：

首先引入swiper的css和js文件
官网下载地址

<link href="swiper.min.css" rel="stylesheet">
<script src="swiper.min.js"></script>

html结构部分

<body>
 <div class="tab">
 <div class="tabItem active">slider1</div>
 <div class="tabItem">slider2</div>
 </div>
 <div class="swiper-container">
 <div class="swiper-wrapper">
  <div class="swiper-slide">slider1</div>
  <div class="swiper-slide">slider2</div>
 </div> 
 </div> 
</body>

js部分

var tabItem = $('.tab .tabItem');
var mySwiper = new Swiper('.swiper-container', {
 autoplay: false,
 on:{
 //swiper从当前slide开始过渡到另一个slide时执行
 slideChangeTransitionStart: function(){
 var n = this.activeIndex;//过渡后的slide索引
 changeTab(n);
  }
 }
})
//tab点击切换silde
tabItem.click(function(){
 var ind = $(this).index();
 changeTab(ind);
 mySwiper.slideTo(ind);
})
//tab切换样式
function changeTab(index){
 tabItem.removeClass('active').eq(index).addClass('active');
}

css部分

html,body{width: 100%;height: 100%;}
div{margin: 0;padding: 0;}
.swiper-container,.swiper-wrapper,.swiper-slide{width: 100%;height: 100%;}
.swiper-slide{display: flex;align-items: center;justify-content: space-around;}
.tab{width: 100%;height: 50px;overflow: hidden;border-bottom: 1px solid #eee;position: fixed;top: 0;left: 0;z-index: 999;}
.tabItem{width: 50%;height: 50px;float: left;background: #e5e5e5;line-height: 50px;text-align: center;}
.active{background: #FE2D26;}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

swiper4实现移动端导航栏tab滑动切换

- Author -

萌面怪瘦呀

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

用js实现多域名不同文件的调用方法

Jan 12 Javascript

javascript document.images实例

May 27 Javascript

jQuery学习7 操作JavaScript对象和集合的函数

Feb 07 Javascript

JavaScript执行顺序详细介绍

Dec 04 Javascript

jquery实现Ctrl+Enter提交表单的方法

Jul 21 Javascript

详解jQuery简单的表格应用

Dec 16 Javascript

详解刷新页面vuex数据不消失和不跳转页面的解决

Jan 30 Javascript

在vue中封装可复用的组件方法

Mar 01 Javascript

bootstrap 路径导航分页进度条的实例代码

Aug 06 Javascript

vue组件命名和props命名代码详解

Sep 01 Javascript

jQuery使用ajax传递json对象到服务端及contentType的用法示例

Mar 12 jQuery

利用javaScript处理常用事件详解

Apr 14 Javascript

JS highcharts动态柱状图原理及实现

Oct 16 #Javascript

如何手动实现一个 JavaScript 模块执行器

Oct 16 #Javascript

JS highcharts实现动态曲线代码示例

Oct 16 #Javascript

Swiper实现导航栏滚动效果

Oct 16 #Javascript

node.js通过url读取文件

Oct 16 #Javascript

vue组件实现移动端九宫格转盘抽奖

Oct 16 #Javascript

Vue3.0的优化总结

Oct 16 #Javascript