Vue如何实现swiper左右滑动内容区控制导航tab同时切换高亮

Vue如何实现左右滑动内容区控制导航tab同时切换高亮,实现的效果是:点击导航按钮时内容区发生改变,左右滑动内容区时导航按钮跟随切换高亮,停留在某个内容区时刷新页面后仍然停留在当前内容区。

这里涉及到几个点:

1.左右滑动,那就需要用到swiper,当然你可以自己写一个类似的功能,虽然不难但是项目开发中可能会比你引入插件要耗时很多;

2.Vue开发鼓励组件化,所以在这我是分为nav和swiper两个组件,那么就要用到事件发射与接收,我在前面的博文有关于事件发射与接收的心得,具体点击查看

3.利用vue路由和动态组件实现模板加载,切换和刷新页面停留在当前内容区;

实现的效果如下图所示:

开始具体的代码实现:

一.在main.js设置路由相关数据,如下图所示:


编写app.vue的代码,如下图所示:

二.我们先实现点击导航按钮时内容区发生改变。

1.导航组件的静态模板很简单,如下图所示:

2.swiper组件的静态模板,首先要引入swiper,下载swiper的js和css文件放入static文件夹,在swiper组件中引入,如下图所示:

3.同时在eslintrc.js文件中加入红框中代码,如下图所示:

4.此时已引入swiper插件,我们需要让链接路径与slide的内容区的模板文件保持同步,这里通过路由获取链接地址控制swiper的初始slide索引initialSlide即可实现,如下图第61行所示。

5.一般情况下内容区我们会做成独立的模板进行动态导入,传统js可以运用iframe框架引入模板文件,angular可以运用ng-include指令引入模板文件,那么vue用什么呢,vue用动态组件的方式引入,官网有详细解说我就不解释了,具体查看。swiper组件静态模板代码如下图所示:



此时swiper组件已经完成,可以自由滑动,其中one、two、three、four、five是动态载入的模板文件。

6.前期工作已经完成,由于我们是在两个组件间进行交互,所以点击导航按钮时需要将当前导航按钮的index传给swiper组件,然后利用swiper插件的slideTo方法跳转到相应的内容区,所以在nav组件的tabClick方法中加入发射事件,如下图所示:

7.然后在swiper组件添加接收方法,如下图所示:

此时已经实现点击导航按钮时内容区发生改变的效果。

三.实现左右滑动内容区时导航按钮跟随切换高亮。

1.左右滑动内容区时利用swiper插件的on方法监控slideChange属性,当滑动slide后将当前activeIndex传给nav组件,所以在swiper组件加入发射事件,如下图红框所示:

2.然后在nav组件添加接收方法,如下图红框所示:

3.此时已经实现左右滑动内容区时导航按钮跟随切换高亮。但是我们刷新页面会发现链接路径与导航按钮的高亮并不一致,是因为我们导航按钮初始索引nowIndex为0,所以我们需要通过路由获取链接地址赋值给nowIndex实现刷新页面后链接路径与导航按钮同步,如下图红框所示:

至此完成所有预定功能,源码在百度云盘里,有需要的朋友自行下载:

链接:https://pan.baidu.com/s/1hsw6Mv6     密码:lgn4

如需转载请注明出处:http://www.cnblogs.com/zishang91/p/7940433.html,以便有错误可以及时修改,若有错漏不足之处,请见谅并且指点,谢谢!!!

时间: 2024-10-21 02:29:28

Vue如何实现swiper左右滑动内容区控制导航tab同时切换高亮的相关文章

Vue实现左右滑动内容区控制导航tab同时切换高亮

原文地址:https://www.cnblogs.com/wasbg/p/10975366.html

【前端】【vue 3-6】点击文本内容,根据点击,切换class属性

<html> <title>test</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <style> .activated{ color: red } </style> <body><div id="app" @click="hanleddivclic

vue+Element左树导航右内容区页面跳转

首先在项目中添加Element UI npm i element-ui -S 修改main.js // The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import ElementUI from 'element-ui' impo

bootstrap弹窗导致内容区左移

用bootstrap在多次弹窗后导致了内容区左移动了,如下: 最后只要加上如下代码,就可以了 body{ padding-right: 0!important; } 同时,在默认的弹窗是右边的滑轮是不能滑动的 .modal-open { overflow: initial; } 便可以了.modal-open是在弹窗时加在body上的,当然不要滑动就直接改为auto bootstrap的遮罩层是.modal-backdrop,所以有些在遮罩层上面的肯定不要设置遮罩层的z-index, 如下: .

Vue.js 移入mouseenter显示当前内容

样式比较丑,勿喷! 鼠标移到第二个,左边背景就显示当前内容. 鼠标移到第三个,左边背景就显示当前内容. 如下图: window.vue   组件:就是要显示内容的组件. <style scoped> div{ /*width: 100px;*/ height: 20px; background-color: #138a97; color:#fff; /*子绝父相定位*/ position: absolute; bottom:0; left:20px; } </style> <

实现移动端顶部与底部固定,内容区优化的效果

实现顶部与底部固定的效果十分容易,且很多人都会选择用这个方式,就是顶部position:fixed,底部也position:fixed.实现的效果就像下面两张图,container区域是布满整个屏幕的,且滚动条也是滚动在整个屏幕中,调内容区时只能调节高度.    其实还有一种方式可以实现较好的效果,就是内容区只在顶部和底部的中间,内容部分和滚动条也只是中间区域滚动 实现代码: <meta name="viewport" content="width=device-wid

Overflow属性——定义元素(如Div)内容区溢出情况

说明:overflow属性规定当内容溢出元素框时发生的事情. 注释:属性定义溢出元素内容区的内容会如何处理.如果值为 scroll,不论是否需要,用户代理都会提供一种滚动机制.因此,有可能即使元素框中可以放下所有内容也会出现滚动条.默认值是 visible. 可用的值: visible:默认值.内容不会被修剪,会呈现在元素框之外. hidden:内容会被修剪,并且其余内容是不可见的. scroll:内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容. auto:如果内容被修剪,则浏览器会显示

(模板)网页游戏用的“内容区”的“游戏下载”模板

网页游戏用的"内容区"的下载模板 <style> .article-main{ width:939px; } /*下载中心*/ .big_pub_right { width:960px; } .faq p { line-height:25px; } .pub_title { background:#353b42; height:84px; color:#969db0; line-height:84px; padding:0px 20px; } .pub_title a {

WPF中Listbox/ListView 横向展示/滑动内容的方法

<ListView Name="BoardListView" ScrollViewer.VerticalScrollBarVisibility="Hidden" Height="100" VerticalAlignment="Bottom"> <ListView.ItemsPanel> <ItemsPanelTemplate> <WrapPanel/> </ItemsPan