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 相关文章推荐
jQuery中add实现同时选择两个id对象
Oct 22 Javascript
ASP.NET jQuery 实例12 通过使用jQuery validation插件简单实现用户注册页面验证功能
Feb 03 Javascript
javaScript 删除字符串空格多种方法小结
Oct 24 Javascript
js中通过split函数分割字符串成数组小例子
Sep 21 Javascript
table行随鼠标移动变色示例
May 07 Javascript
使用jquery修改表单的提交地址基本思路
Jun 04 Javascript
原生javascript实现addClass,removeClass,hasClass函数
Feb 25 Javascript
获取今天,昨天,本周,上周,本月,上月时间(实例分享)
Jan 04 Javascript
JavaScript严格模式下关于this的几种指向详解
Jul 12 Javascript
分析javascript原型及原型链
Mar 18 Javascript
Seajs源码详解分析
Apr 02 Javascript
详解Vue中的MVVM原理和实现方法
Jul 15 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
php获取本机真实IP地址实例代码
2016/03/31 PHP
PHP基于Closure类创建匿名函数的方法详解
2017/08/17 PHP
Thinkphp 框架扩展之应用模式实现方法分析
2020/04/27 PHP
JavaScript 异步调用框架 (Part 1 - 问题 &amp; 场景)
2009/08/03 Javascript
jQuery get和post 方法传值注意事项
2009/11/03 Javascript
jQuery 入门级学习笔记及源码
2010/01/22 Javascript
通过js动态操作table(新增,删除相关列信息)
2012/05/23 Javascript
在JavaScript中处理字符串之fontcolor()方法的使用
2015/06/08 Javascript
一张Web前端的思维导图分享
2015/07/03 Javascript
JavaScript编程的单例设计模讲解
2015/11/10 Javascript
NodeJS实现阿里大鱼短信通知发送
2016/01/17 NodeJs
input 禁止输入特殊字符的四种实现方式
2016/08/24 Javascript
react中的ajax封装实例详解
2017/10/17 Javascript
详解js的作用域、预解析机制
2018/02/05 Javascript
浅谈HTTP 缓存的那些事儿
2018/10/17 Javascript
vue-cli3全面配置详解
2018/11/14 Javascript
vuex页面刷新后数据丢失的方法
2019/01/17 Javascript
iSlider手机端图片滑动切换插件使用详解
2019/12/24 Javascript
python遍历文件夹并删除特定格式文件的示例
2014/03/05 Python
python列表的常用操作方法小结
2016/05/21 Python
详解python异步编程之asyncio(百万并发)
2018/07/07 Python
Python文本文件的合并操作方法代码实例
2020/03/31 Python
解决django无法访问本地static文件(js,css,img)网页里js,cs都加载不了
2020/04/07 Python
Python通过文本和图片生成词云图
2020/05/21 Python
如何在vscode中安装python库的方法步骤
2021/01/06 Python
基于PyInstaller各参数的含义说明
2021/03/04 Python
学校后勤人员职责
2013/12/27 职场文书
中学生演讲稿
2014/04/26 职场文书
过程装备与控制工程专业求职信
2014/07/02 职场文书
群众路线个人自我剖析材料
2014/10/07 职场文书
党的群众路线专项整治方案
2014/11/03 职场文书
创业计划书之零食店(进口)
2019/09/24 职场文书
2019年幼儿园家长接送责任书
2019/10/29 职场文书
python process模块的使用简介
2021/05/14 Python
ORACLE查看当前账号的相关信息
2021/06/18 Oracle
Tomcat安装使用及部署Web项目的3种方法汇总
2022/08/14 Servers