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行所示

在这里插入图片描述
至此所有功能已完成

相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页