Swiper实现导航栏滚动效果


Posted in Javascript onOctober 16, 2020

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

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实现导航栏滚动效果

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

Swiper实现导航栏滚动效果

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

最终效果

Swiper实现导航栏滚动效果

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

Javascript 相关文章推荐
js显示时间 js显示最后修改时间
Jan 02 Javascript
jquery获得页面元素的坐标值实现思路及代码
Apr 15 Javascript
js对列表中第一个值处理与jsp页面对列表中第一个值处理的区别详解
Nov 05 Javascript
zTree插件之多选下拉菜单实例代码
Nov 06 Javascript
jquery控制表单输入框显示默认值的方法
May 22 Javascript
浅谈jQuery animate easing的具体使用方法(推荐)
Jun 17 Javascript
Bootstrap框架安装使用详解
Jan 21 Javascript
AngularJS实现路由实例
Feb 12 Javascript
vue2.0实战之基础入门(1)
Mar 27 Javascript
Vue中插入HTML代码的方法
Sep 21 Javascript
完美解决通过IP地址访问VUE项目的问题
Jul 18 Javascript
javascript的setTimeout()使用方法总结
Nov 20 Javascript
node.js通过url读取文件
Oct 16 #Javascript
vue组件实现移动端九宫格转盘抽奖
Oct 16 #Javascript
Vue3.0的优化总结
Oct 16 #Javascript
JavaScript通如何过RGraph实现动态仪表盘
Oct 15 #Javascript
利用js实现简易红绿灯
Oct 15 #Javascript
关于Node.js中频繁修改代码重启服务器的问题
Oct 15 #Javascript
JS如何操作DOM基于表格动态展示数据
Oct 15 #Javascript
You might like
DOMXML函数笔记
2006/10/09 PHP
动态新闻发布的实现及其技巧
2006/10/09 PHP
《PHP编程最快明白》第三讲:php数组
2010/11/01 PHP
php安全之直接用$获取值而不$_GET 字符转义
2012/06/03 PHP
深入php var_dump()函数的详解
2013/06/05 PHP
PHP禁止个别IP访问网站
2013/10/30 PHP
ThinkPHP 3.2 数据分页代码分享
2014/10/14 PHP
php生成带logo二维码方法小结
2016/04/08 PHP
PHP面向对象五大原则之依赖倒置原则(DIP)详解
2018/04/08 PHP
PHP使用phpunit进行单元测试示例
2019/09/23 PHP
调用js时ie6和ie7,ff的区别
2009/08/19 Javascript
jquery+css+ul模拟列表菜单具体实现思路
2013/04/15 Javascript
JS随机生成不重复数据的实例方法
2013/07/17 Javascript
javascript:window.open弹出窗口的位置问题
2014/03/18 Javascript
浅谈被jQuery抛弃的函数及替代函数
2015/05/03 Javascript
VUE元素的隐藏和显示(v-show指令)
2017/06/23 Javascript
JS简单实现点击跳转登陆邮箱功能的方法
2017/10/31 Javascript
基于vue实现移动端圆形旋钮插件效果
2018/11/28 Javascript
JavaScript数据结构与算法之二叉树遍历算法详解【先序、中序、后序】
2019/02/21 Javascript
微信小程序封装的HTTP请求示例【附升级版】
2019/05/11 Javascript
[02:20]DOTA2亚洲邀请赛 EHOME战队出场宣传片
2015/02/07 DOTA
[01:51]2018年度CS GO最具人气外援-完美盛典
2018/12/16 DOTA
[01:08:32]DOTA2-DPC中国联赛 正赛 DLG vs PHOENIX BO3 第二场 1月18日
2021/03/11 DOTA
在Python中进行自动化单元测试的教程
2015/04/15 Python
基于Django的python验证码(实例讲解)
2017/10/23 Python
python画双y轴图像的示例代码
2019/07/07 Python
Python爬虫爬取煎蛋网图片代码实例
2019/12/16 Python
css3弹性盒模型实例介绍
2013/05/27 HTML / CSS
纯CSS3实现运行时钟的示例代码
2021/01/25 HTML / CSS
产品质量承诺书
2014/03/27 职场文书
党员个人整改方案及措施
2014/10/25 职场文书
工作年限证明模板
2014/11/01 职场文书
2014年青年志愿者工作总结
2014/12/09 职场文书
大学生心理健康教育心得体会
2016/01/12 职场文书
PL350与SW11的比较
2021/04/22 无线电
Win10开机修复磁盘错误怎么跳过?Win10关闭开机磁盘检查的方法
2022/09/23 数码科技