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清空textarea等输入框实现代码
Apr 22 Javascript
jQuery通过Ajax返回JSON数据
Apr 28 Javascript
Jquery注册事件实现方法
May 18 Javascript
详解javascript跨浏览器事件处理程序
Mar 27 Javascript
javascript 数组的定义和数组的长度
Jun 07 Javascript
Bootstrap图片轮播组件Carousel使用方法详解
Oct 20 Javascript
微信小程序购物商城系统开发系列-工具篇的介绍
Nov 21 Javascript
easyUI combobox实现联动效果
Jan 17 Javascript
VSCode中如何利用d.ts文件进行js智能提示
Apr 13 Javascript
layui 监听表格复选框选中值的方法
Aug 15 Javascript
JS实现可用滑块滑动的缓动图代码
Sep 01 Javascript
原生JS实现微信通讯录
Jun 18 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 DataGrid 实现代码
2009/08/12 PHP
用php实现让页面只能被百度gogole蜘蛛访问的方法
2009/12/29 PHP
curl实现站外采集的方法和技巧
2014/01/31 PHP
php的慢速日志引起的Mysql错误问题分析
2014/05/13 PHP
php小技巧之过滤ascii控制字符
2014/05/14 PHP
神盾加密解密教程(三)PHP 神盾解密工具
2014/06/08 PHP
浅析PHP编程中10个最常见的错误
2014/08/08 PHP
php数组索引与键值操作技巧实例分析
2015/06/24 PHP
PHP AjaxForm提交图片上传并显示图片源码
2016/11/29 PHP
ecshop添加菜单及权限分配问题
2017/11/21 PHP
php测试kafka项目示例
2020/02/06 PHP
javascript+iframe 实现无刷新载入整页的代码
2010/03/17 Javascript
整理一些JavaScript的IE和火狐的兼容性注意事项
2011/03/17 Javascript
JavaScript中的console.profile()函数详细介绍
2014/12/29 Javascript
Bootstrap源码解读按钮(5)
2016/12/23 Javascript
vue 做移动端微信公众号采坑经验记录
2018/04/26 Javascript
vuex actions传递多参数的处理方法
2018/09/18 Javascript
ES6基础之字符串和函数的拓展详解
2019/08/22 Javascript
[02:38]DOTA2 夜魇暗潮2020活动介绍官方视频
2020/11/04 DOTA
Python2.x中str与unicode相关问题的解决方法
2015/03/30 Python
用python实现简单EXCEL数据统计的实例
2017/01/24 Python
python 格式化输出百分号的方法
2019/01/20 Python
Python面向对象程序设计类的封装与继承用法示例
2019/04/12 Python
pycharm访问mysql数据库的方法步骤
2019/06/18 Python
Python Django Cookie 简单用法解析
2019/08/13 Python
详解PyTorch手写数字识别(MNIST数据集)
2019/08/16 Python
Python搭建代理IP池实现检测IP的方法
2019/10/27 Python
python实现的Iou与Giou代码
2020/01/18 Python
如何通过命令行进入python
2020/07/06 Python
python中实现栈的三种方法
2020/12/19 Python
Python datetime模块的使用示例
2021/02/02 Python
CSS3实现歌词进度文字颜色填充变化动态效果的思路详解
2020/06/02 HTML / CSS
用HTML5.0制作网页的教程
2010/05/30 HTML / CSS
size?爱尔兰官方网站:英国伦敦的球鞋精品店
2019/03/31 全球购物
廉洁自律证明
2015/06/24 职场文书
MySQL添加索引特点及优化问题
2022/07/23 MySQL