vue+swiper实现左右滑动内容区同时导航高亮

vue+swiper实现左右滑动内容区同时导航高亮

曾经碰了不少坑，在搞明白各种参数传递之后恍然大悟，主要是利用index索引在不同组件间传递，使二者产生联系。

附上实现效果图：

这里我主要是实现上方导航的点击跳转到相应的内容区以及滑动内容区上方导航高亮

实现的代码

首先创建好所需要的组件文件，然后在router中index.js引入相应的组件


因为我是基于首页home这个组件上做的，所以我放在二级路径上。
最后把index.js文件引入main.js文件中。

一、创建 home-nav.vue 和 home.swiper.vue 组件
然后把他们引入到你所需要的页面中，我这里是home.vue(也可以是app.vue等等)

二、实现点击导航按钮时内容区发生改变
1.导航组件home-nav的静态模板


2、home-swiper组件的静态模板。引入所需要在内容区显示的四个组件。
动态引入组件
3、引入swiper，下载swiper的js和css文件放入static文件夹，在home-swiper组件中引入。


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

此时swiper组件已经完成，可以自由滑动

4、前期工作已经完成，由于我们是在两个组件间进行交互，所以点击导航按钮时需要将当前导航按钮的index传给home-swiper组件，然后利用swiper插件的slideTo方法跳转到相应的内容区，所以在home-nav组件的tabClick方法中加入发射事件
这里用到了两个组件之间数据的传递，我们可以创建一个新的文件：bus.js，然后把他放到assests文件夹中，作为home-nav和home-swiper组件传递的中间文件。


在home-nav组件中引入bus.js：

5、在home-swiper组件中接收方法，同样先引入bus.js

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

三、实现左右滑动内容区时导航按钮跟随切换高亮。
1.左右滑动内容区时利用swiper插件的on方法监控slideChange属性,当滑动slide后将当前activeIndex传给nav组件，所以在home-swiper组件加入发射事件

2、在home-nav组件中接收
在mounted()中接收

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

这时就已经可以实现预定的功能了。