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扩展插件Validate 1 基本使用方法并打包下载
Sep 05 Javascript
jQuery截取指定长度字符串的实现原理及代码
Jul 01 Javascript
JS实现两表格里数据来回转移的方法
May 28 Javascript
jQuery三级下拉列表导航菜单代码分享
Apr 15 Javascript
微信小程序 开发之滑块视图容器(swiper)详解及实例代码
Feb 22 Javascript
javascript 中select框触发事件过程的分析
Aug 01 Javascript
webpack构建换肤功能的思路详解
Nov 27 Javascript
详解Javascript 中的 class、构造函数、工厂函数
Dec 20 Javascript
详解node.js 下载图片的 2 种方式
Mar 02 Javascript
vue源码学习之Object.defineProperty 对数组监听
May 30 Javascript
vue路由传参三种基本方式详解
Dec 09 Javascript
Vue发布订阅模式实现过程图解
Apr 30 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 对象接口简单实现方法示例
2020/04/13 PHP
javascript中利用数组实现的循环队列代码
2010/01/24 Javascript
js中字符替换函数String.replace()使用技巧
2011/08/14 Javascript
jquery下checked取值问题的解决方法
2012/08/09 Javascript
完美兼容多浏览器的js判断图片路径代码汇总
2015/04/17 Javascript
PHP+MySQL+jQuery随意拖动层并即时保存拖动位置实例讲解
2015/10/09 Javascript
通用javascript代码判断版本号是否在版本范围之间
2015/11/29 Javascript
js仿支付宝填写支付密码效果实现多方框输入密码
2016/03/09 Javascript
jQuery替换节点用法示例(使用replaceWith方法)
2016/09/08 Javascript
RGB和YUV 多媒体编程基础详细介绍
2016/11/04 Javascript
js上传图片预览的实现方法
2017/05/09 Javascript
webpack学习--webpack经典7分钟入门教程
2017/06/28 Javascript
简单谈谈vue的过渡动画(推荐)
2017/10/11 Javascript
详解angularjs 学习之 scope作用域
2018/01/15 Javascript
微信小程序checkbox组件使用详解
2018/01/31 Javascript
vue axios请求超时的正确处理方法
2018/04/02 Javascript
angularjs下ng-repeat点击元素改变样式的实现方法
2018/09/12 Javascript
angular2 NgModel模块的具体使用方法
2019/04/10 Javascript
如何实现双向绑定mvvm的原理实现
2019/05/28 Javascript
vue+element-ui+axios实现图片上传
2019/08/20 Javascript
浅析 Vue 3.0 的组装式 API(一)
2020/08/31 Javascript
[05:48]DOTA2英雄梦之声vol21 屠夫
2014/06/20 DOTA
kNN算法python实现和简单数字识别的方法
2014/11/18 Python
分析Python编程时利用wxPython来支持多线程的方法
2015/04/07 Python
初步讲解Python中的元组概念
2015/05/21 Python
Python字符串匹配算法KMP实例
2015/07/18 Python
全面解析Python的While循环语句的使用方法
2015/10/13 Python
深入浅析Python中的迭代器
2019/06/04 Python
基于django传递数据到后端的例子
2019/08/16 Python
python语音识别指南终极版(有这一篇足矣)
2020/09/09 Python
pycharm最新激活码有效期至2100年(亲测可用)
2021/02/05 Python
canvas拼图功能实现代码示例
2018/11/21 HTML / CSS
学生档案自我鉴定
2013/10/07 职场文书
医院辞职信范文
2014/01/17 职场文书
工作推荐信范文
2014/05/10 职场文书
大连导游词
2015/02/12 职场文书