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

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;}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

时间: 2020-10-13

Swiper实现导航栏滚动效果

在一些移动app中,总能看到导航栏是可以滚动,下列例子是在vant的官方文档中看到的,这样的滚动效果利用Swiper也可以实现,效果实现的思路是,根据当前点击的"标签"为起点,当前标签"的位置大于视口的一半时,让容器的位置偏移一定的位置,让当前点击的"标签"始终在视口的中间位置. 1.引入相关插件 <link rel="stylesheet" href="../css/swiper.css" > <

swiper4实现移动端导航切换

本文实例为大家分享了swiper4实现移动端导航切换的具体代码,供大家参考,具体内容如下 首先导入 <link rel="stylesheet" href="css/swiper.min.css" rel="external nofollow" rel="external nofollow" > <script src="js/jquery-1.10.1.min.js"></s

Bootstrap的Carousel配合dropload.js实现移动端滑动切换图片

轮播图可以通过点击按钮来跳到上一张或者下一张,在移动端我们常用的就是通过滑动来实现一些时间,那么如何实现呢. 以下是通过bootstrap的Carousel和dropload.js(移动端上下拉动刷新插件)的实现方法. HTML部分 <div id="goods_lunbo" style="width:200%;overflow:hidden;margin-left:-50%;"> <div id="goods_lunbo2"

vue+Vue Router多级侧导航切换路由(页面)的实现代码

当当当当当~我又来了. 在项目里经常会遇到侧导航切换页面的功能. 如果我们将侧导航做成公共组件,来调用的话,就会在每一个页面都引用该组件,在后期维护的时候比较麻烦,比如改参数. 所以此文将侧导航做成父页面组件,将切换的页面做成子页面,这样只需调用一次即可.大大减少了后期维护的麻烦 涉及功能点 侧导航支持多级 Vue Router的使用方法( 官方文档 ) 子父组件的写法 样式:elementUI 效果图 实现 --- 目录结构 --- Vue Router的使用方法 首先安装 npm insta

vue使用vuex实现首页导航切换不同路由的方法

vue实现首页导航切换不同路由的方式(二)[使用vuex实现的],具体代码如下所示: <nav> <!-- 导航栏 --> <div class="indexNavOut"> <div class="indexNav"> <ul class="navLi"> <li @click="checkNav()" style="width: 130px;&qu

移动端滑动切换组件封装 vue-swiper-router实例详解

具体代码如下所述: <strong>组件部分</strong> <template> <div class="main"> <div class="page-tab"> <div :class="nowPath == item.path ? 'tab-item tab-item_active' : 'tab-item'" v-for='(item, index) in tabLis

使用JS实现导航切换时高亮显示的示例讲解

index.html代码内容 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>导航高亮显示</title> <style type="text/css"> body{ font-size:20px; } .nav{ list-style-type: none; margin:0; padding:0; } .cl

Vue实现移动端页面切换效果【推荐】

在子页面把整个页面做绝对定位,覆盖整个屏幕,子父页面将 router-view 用  transition 套起来,并加上过渡动画就可以啦. 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, init

vue.js实现左边导航切换右边内容

本文实例为大家分享了vue.js左边导航切换右边内容的具体代码,供大家参考,具体内容如下 <template> <div class="layout-container"> <y-header> <div slot="nav"></div> </y-header> <div class="w"> <div class="content"&

vue-router之实现导航切换过渡动画效果

过渡动效 提供了transition的封装组件,添加过渡动画,通过添加或删除css类名来实现. 过渡的css类名: v-enter 进入过渡的开始状态 v-enter-active 进入活动状态 v-enter-to 进入的结束状态 v-leave 离开过渡的开始状态 v-leave-active 离开活动状态 v-leave-to 离开结束状态 过渡模式: in-out 先进后出 out-in 先出后进 用法: 做一个淡隐淡出效果 把想要运动的元素放到<transition></tra