vue+swiper实现左右滑动内容区同时导航高亮
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 实现刷新页面后链接路径与导航按钮同步，如下图红框所示：
文章图片
这时就已经可以实现预定的功能了。
推荐阅读
- 关于QueryWrapper|关于QueryWrapper,实现MybatisPlus多表关联查询方式
- MybatisPlus使用queryWrapper如何实现复杂查询
- python学习之|python学习之 实现QQ自动发送消息
- 孩子不是实现父母欲望的工具——林哈夫
- opencv|opencv C++模板匹配的简单实现
- Node.js中readline模块实现终端输入
- java中如何实现重建二叉树
- 人脸识别|【人脸识别系列】| 实现自动化妆
- paddle|动手从头实现LSTM
- pytorch|使用pytorch从头实现多层LSTM