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实现刷新页⾯后链接路径与导航按钮同步，如下图红框所⽰：
⾄此完成所有预定功能，源码在百度云盘⾥，有需要的朋友⾃⾏下载：
分享在百度云盘上的demo总是⼀上传就被封了，经过⽼铁们私信建议我将demo放在github上了，有需要的可以点击链接进⾏下载：如需转载请注明出处：，以便有错误可以及时修改，若有错漏不⾜之处，请见谅并且指点，谢谢

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。