Swiper实现导航栏滚动效果

在一些移动app中,总能看到导航栏是可以滚动,下列例子是在vant的官方文档中看到的,这样的滚动效果利用Swiper也可以实现,效果实现的思路是,根据当前点击的“标签”为起点,当前标签”的位置大于视口的一半时,让容器的位置偏移一定的位置,让当前点击的“标签”始终在视口的中间位置。

1、引入相关插件

<link rel="stylesheet" href="../css/swiper.css" >
<script src="http://www.jq22.com/jquery/jquery-1.7.1.js"></script>
<script src="../js/swiper.js"></script>

2、编写view(界面)

<div class="box">
 <div class="swiper-container">
 <div class="swiper-wrapper">
 <div class="swiper-slide">综合</div>
 <div class="swiper-slide">单曲</div>
 <div class="swiper-slide">视频</div>
 <div class="swiper-slide">歌手</div>
 <div class="swiper-slide">专辑</div>
 <div class="swiper-slide">歌单</div>
 <div class="swiper-slide">主播电台</div>
 <span></span>
 </div>
 </div>
</div>

3、编写style

*{
 margin: 0;
 padding: 0;
 }
 .box{
 width: 500px;
 height: 50px;
 border: 1px solid #000;
 margin: 100px auto;
 }
 .swiper-container{
 width: auto!important;
 height: 100%;
 text-align: center;
 line-height: 50px;
 color: #000;
 font-size: 20px;
 }
 .swiper-wrapper{
 position: relative;
 width: auto!important;
 height: 100%;
 }
 .swiper-slide {
 list-style: none;
 display: flex;
 justify-content: flex-start;
 flex-wrap: nowrap;
 cursor: pointer;
 }
 .swiper-wrapper span{
 position: absolute;
 height: 3px;
 background: #000;
 left: 1%;
 top: 85%;
 }
 .swiper-slide{
 width: auto!important;
 margin-right: 15px!important;
 padding: 0 18px;
 }

为了让每个swiper-slide的宽度由内容撑起,右边显示一半是提示用户这个导航栏是可以滚动的,所以在初始化时要设置swiper的slidesPerView为auto,slidesPerView: “auto”, 同时要在css设置swiper-slide的样式为:

 .swiper-slide{
 width: auto!important;
 margin-right: 15px!important;
 padding: 0 18px;
 }

这样swiper-slide的宽度就是由内容撑起了,而且可以自由的进行滚动了

4、编写js

$(function () {
 $(".swiper-wrapper span").css({width: $(".swiper-slide")[0].offsetWidth});
 let navScroll = new Swiper('.box .swiper-container', {
 freeMode:true,
 slidesPerView: "auto",
 freeModeMomentumRatio: 0.5,
 on:{
 //当前swiper-slide点击时触发事件
 click:function (e) {
  let thisWidth = this.clickedSlide.offsetWidth;
  let thisLeft = this.clickedSlide.offsetLeft;
  let offsetX = this.width / 2 - thisLeft - thisWidth / 2;
  //偏移量在1/2视口内时,容器不发生偏移
  if (offsetX > 0){
  offsetX = 0;
  }
  //offsetX小于容器最大偏移时,让偏移量等于容器最大的偏移量
  else if (offsetX < this.maxTranslate()){
  offsetX = this.maxTranslate();
  }
  //设置容器的过渡动画
  this.setTransition(300);
  this.setTranslate(offsetX);
  //滚动条位置和长度执行动画
  $(".swiper-wrapper span").animate({left: thisLeft, width: thisWidth},400);
 }
 }
 });
 })

最终效果

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

时间: 2020-10-16

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

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">

微信小程序导航栏跟随滑动效果的实现代码

效果图 .wxml <view class='tabBar'> <view class='tabItem wx:if="{{tabClick===0?"click":""}}"' bindtap='clickTab' data-index='0'>tab1</view> <view class='tabItem wx:if="{{tabClick===1?"click":&q

微信小程序顶部导航栏可滑动并选中放大

这篇文章主要介绍了微信小程序顶部导航栏可滑动并选中放大,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 老规矩,先看效果图 可以看到我们实现了如下功能 1,顶部导航栏 2,可以左右滑动的导航栏 3,选中条目放大 原理其实很简单,我这里把我研究后的源码发给大家吧. wxml文件如下 <!-- 导航栏 --> <scroll-view scroll-x class="navbar" scroll-with-animatio

jQuery实现带幻灯的tab滑动切换风格菜单代码

本文实例讲述了jQuery实现带幻灯的tab滑动切换风格菜单代码.分享给大家供大家参考.具体如下: 这是一款很不错的TAB滑动切换效果,jQuery带幻灯的tab滑动切换风格菜单导航条,点击上方的文字,下边就向左或向右滑动切换,动画效果的TAB选项卡. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-flash-style-tab-cha-menu-codes/ 具体代码如下: <!DOCTYPE html> <head&g

iview tabs 顶部导航栏和模块切换栏的示例代码

1.顶部导航栏: html: <div class="tab-pane"> <tabs> <tab-pane label="上崗時間明細" name="detail-report" class="tab1"> <div class="tab-pane-1"> 0000000000 </div> <upload multiple :action

Android Listview上下拉动刷新tab滑动切换功能

近期要做一个含有两个tab切换页面,两个页面有公共的描述信息区域,两个tab都是listview,可以向上或向下拉动刷新,在页面中部有一个tab切换区域,向上滑动的时候tab区域到顶部后就不在移动,向下拉又重新回到初始位置,先看一样样式图吧! 整个需求大致如上图所示,其中上拉刷新和下拉刷新没有截图,采用了开源控件PullToRefreshListView来实现这个效果. 1.总体思路,为了简单不想监控很多手势问题,因此投机取巧的采用下面的方式来实现, a.  整个页面是一个listview,公共

JavaScript实现滑动导航栏效果

本文实例为大家分享了js实现滑动导航栏效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.

微信小程序导航栏滑动定位功能示例(实现CSS3的positionsticky效果)

本文实例讲述了微信小程序导航栏滑动定位功能.分享给大家供大家参考,具体如下: 实现的效果 实现的原理 1. 通过对scroll的监听获取滚动条的scrollTop值; 2. 在导航的class判断scrollTop; 3. 切换position:fixed与position:relative. WXML <view style="height:100%;position:fixed;width:100%;"> <scroll-view scroll-y="f

iOS状态栏、导航栏的一些笔记分享

前言 IOS的界面分为状态栏和导航栏,如下图所示: 状态栏与导航栏的位置如上图,我们可以通过[UIApplication sharedApplication].statusBarFrame.size获取状态栏的size(一般没有刘海时的高度为20,有刘海时的高度为44). 通过self.navigationController.navigationBar.frame.size获取导航栏的size(一般高度为44,大标题时高度为xyz,当然也可以通过自定义来改变导航栏样式). ***ps:***在

写一个移动端惯性滑动&回弹Vue导航栏组件 ly-tab

前段时间写了一个移动端的自适应滑动Vue导航栏组件,觉得有一定实用性,大家可能会用得到(当然有些大佬自己写得更好的话就没必要啦),于是前两天整理了一下,目前已经发布到npm和GitHub上了,点我到npm,点我到GitHub项目 ,有需要的同学可以在项目中 npm install ly-tab -S 或者 yarn add ly-tab 使用,具体用法下面会讲到. 好了,先看看效果吧 好的,开始废话了,实习差不多3个月了,这段时间跟着导师大佬也有接触过一些项目,也学到了不少东西,接触到的项目基本