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 相关文章推荐
dojo 之基础篇(三)之向服务器发送数据
Mar 24 Javascript
JS模块与命名空间的介绍
Mar 22 Javascript
使用js dom和jquery分别实现简单增删改
Sep 11 Javascript
取得元素的左和上偏移量的方法
Sep 17 Javascript
前端js文件合并的三种方式推荐
May 19 Javascript
Ajax异步获取html数据中包含js方法无效的解决方法
Feb 20 Javascript
Vue + better-scroll 实现移动端字母索引导航功能
May 07 Javascript
vue移动端html5页面根据屏幕适配的四种解决方法
Oct 19 Javascript
JavaScript函数式编程(Functional Programming)高阶函数(Higher order functions)用法分析
May 22 Javascript
JS实现滑动导航效果
Jan 14 Javascript
JavaScript find()方法及返回数据实例
Apr 30 Javascript
springboot+VUE实现登录注册
May 27 Vue.js
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代码收集表单内容并写入文件的代码
2012/01/29 PHP
php unset全局变量运用问题的深入解析
2013/06/17 PHP
一致性哈希算法以及其PHP实现详细解析
2013/08/24 PHP
微信自定义菜单的处理开发示例
2015/04/16 PHP
PHP iconv()函数字符编码转换的问题讲解
2019/03/22 PHP
Yii 框架控制器创建使用及控制器响应操作示例
2019/10/14 PHP
动态控制Table的js代码
2007/03/07 Javascript
js捕获鼠标滚轮事件代码
2013/12/16 Javascript
javascript移动设备Web开发中对touch事件的封装实例
2014/06/05 Javascript
jquery简单的弹出层浮动层代码
2015/04/27 Javascript
JavaScript tab选项卡插件实例代码
2016/02/23 Javascript
详解微信小程序调起键盘性能优化
2018/07/24 Javascript
微信小程序利用button控制条件标签的变量问题
2020/03/15 Javascript
jQuery HTML设置内容和属性操作实例分析
2020/05/20 jQuery
学前端,css与javascript重难点浅析
2020/06/11 Javascript
[37:47]IG vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
详解Python的Django框架中的中间件
2015/07/24 Python
Python实现随机创建电话号码的方法示例
2018/12/07 Python
Python理解递归的方法总结
2019/01/28 Python
Python3 实现串口两进程同时读写
2019/06/12 Python
解决django中ModelForm多表单组合的问题
2019/07/18 Python
Flask框架实现的前端RSA加密与后端Python解密功能详解
2019/08/13 Python
Python调用scp向服务器上传文件示例
2019/12/22 Python
TensorBoard 计算图的查看方式
2020/02/15 Python
python GUI库图形界面开发之PyQt5不规则窗口实现与显示GIF动画的详细方法与实例
2020/03/09 Python
Python是怎样处理json模块的
2020/07/16 Python
鼠标滚轮事件和Mac触控板双指事件
2019/12/23 HTML / CSS
英国网络托管和域名领导者:Web Hosting UK
2017/10/15 全球购物
Kidsroom台湾:来自德国的婴儿用品
2017/12/11 全球购物
2014年综治宣传月活动总结
2014/04/28 职场文书
正科级干部考察材料
2014/05/29 职场文书
七一党日活动总结
2014/07/08 职场文书
导游词范文
2015/02/13 职场文书
2019年行政人事个人工作总结范本!
2019/07/19 职场文书
Sleuth+logback 设置traceid 及自定义信息方式
2021/07/26 Java/Android
python 学习GCN图卷积神经网络
2022/05/11 Python