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 相关文章推荐
PJ Blog修改-禁止复制的代码和方法
Oct 25 Javascript
javascript抽象工厂模式详细说明
Dec 16 Javascript
jQuery中hover方法和toggle方法使用指南
Feb 27 Javascript
Node.js 学习笔记之简介、安装及配置
Mar 03 Javascript
jQuery.form.js的使用详解
Jun 14 jQuery
JavaScript正则表达式校验与递归函数实际应用实例解析
Aug 04 Javascript
Angularjs渲染的 using 指令的星级评分系统示例
Nov 09 Javascript
详解VUE 对element-ui中的ElTableColumn扩展
Mar 28 Javascript
jQuery实现模糊搜索功能的方法分析
Jun 29 jQuery
使用vue完成微信公众号网页小记(推荐)
Apr 28 Javascript
优化Vue项目编译文件大小的方法步骤
May 27 Javascript
jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例
May 27 jQuery
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代码
2007/03/08 PHP
PHP5.2下preg_replace函数的问题
2015/05/08 PHP
Thinkphp+smarty+uploadify实现无刷新上传
2015/07/30 PHP
详解PHP如何更好的利用PHPstorm的自动提示
2017/08/18 PHP
php查询内存信息操作示例
2019/05/09 PHP
php查看一个变量的占用内存的实例代码
2020/03/29 PHP
bootstrap网页框架的使用方法
2016/05/10 Javascript
Angular和Vue双向数据绑定的实现原理(重点是vue的双向绑定)
2016/11/22 Javascript
怎样判断jQuery当前元素是隐藏还是显示
2016/11/23 Javascript
javascript 中Cookie读、写与删除操作
2017/03/29 Javascript
Angularjs实现页面模板清除的方法
2018/07/20 Javascript
详解React服务端渲染从入门到精通
2019/03/28 Javascript
微信小程序 如何获取网络状态
2019/07/26 Javascript
node.js如何根据URL返回指定的图片详解
2020/10/21 Javascript
python模块简介之有序字典(OrderedDict)
2016/12/01 Python
python调用百度语音识别实现大音频文件语音识别功能
2018/08/30 Python
python 检查是否为中文字符串的方法
2018/12/28 Python
Python+OpenCV图片局部区域像素值处理改进版详解
2019/01/23 Python
Pandas操作CSV文件的读写实现方法
2019/11/13 Python
使用pyqt 实现重复打开多个相同界面
2019/12/13 Python
opencv中图像叠加/图像融合/按位操作的实现
2020/04/01 Python
Python sorted对list和dict排序
2020/06/09 Python
基于tensorflow __init__、build 和call的使用小结
2021/02/26 Python
使用phonegap查找联系人的实现方法
2017/03/31 HTML / CSS
导出HTML5 Canvas图片并上传服务器功能
2019/08/16 HTML / CSS
中国第一家杂志折扣订阅网:杂志铺
2016/08/30 全球购物
皇家阿尔伯特英国官方商店:Royal Albert骨瓷
2019/03/25 全球购物
PHP数据运算类型都有哪些
2013/11/05 面试题
保护环境的建议书
2014/03/12 职场文书
成绩单家长评语大全
2014/04/16 职场文书
计算机求职自荐信范文
2014/04/19 职场文书
教师考核材料
2014/05/21 职场文书
汽车维修求职信
2014/06/15 职场文书
暑假社会实践心得体会
2014/09/02 职场文书
面试通知短信
2015/04/20 职场文书
家庭经济困难证明
2015/06/23 职场文书