vue中使用swiper实现页面内容滑动以及导航栏之间的联动效果

思路

1.实现页面；

2.点击导航栏实现页面切换；

3.滑动页面实现导航栏激活；

效果演示

一、引入swiper

安装 npm install swiper vue-awesome-swiper --save

在项目main.js中进行如下设置

二、实现页面

采用vue组件化实现页面构建，HomeHeader为导航栏组件，HomeSwiper为展示页面滑动组件

三.导航栏组件

共五个导航栏，点击不同导航栏通过vue观察者模式向兄弟组件发送“tabSwitch”消息传递当前index

四.页面内容滑动组件

将5个滑动的页面采用vue动态组件的方式引入，使用component标签实现，不懂得可自行查阅资料，这里不做详述

注意此处有两个大坑，我使用的版本为swiper@6.3.3，vue-awesome-swiper@4.1.1

1.在初始化swiper(下图46行)的时候会报错，Swiper is not defined

解决办法：引入Swiper，如图23行所示

2.使用官方提供的swiper标签生成页面模板时会接收不到“slideChange”事件

解决办法：template里面使用如下格式，3-13行所示

该组件通过监听导航栏发送的“tabSwitch”消息，通过swiper提供的slideTo方法改变页面内容展示，下图49-51行

页面滑动时，通过监听swiper提供的"slideChange"事件，向导航栏组件发送“pageSwitch”消息,下图54-57行所示

五.导航栏组件接收参数并实现对应导航激活

页面滑动时，通过监听页面滑动组件发送的的"pageSwitch"消息，激活对应的导航栏,下图30-34行所示

至此所有功能已完成