vue-awesome-swiper的用法&同一页面有多个swiper如何使用

前言:

swiper.js 的vue版api跟cdn引入事一样的api用法,共用官网那套api文档,此篇写下时,swiper.js 的版本是 Swiper4.x 。 这篇用的也是4.x的版本,注意swiper4.x跟swiper3.x的api用法有部分不同,详细请参考swiper官网。

用 npm 安装:

全局注册 ,main.js 中

局部组件注册 , 在每个自定义 .vue 文件里

在 SPA(single page web application 单页面应用)的组件中使用

以下是一个demo,效果是这样的:
情景:
第1个swiper,是左右划的独立的swiper,
第2个swiper 是上下划的,
第3个swiper 是左右划的,嵌套在第2个swiper里面。
第1个swiper的slide可点击,与第2个swiper联动 。

vue-awesome-swiper的用法&同一页面有多个swiper如何使用

同一个页面里有三个 swiper 的 demo

项目结构是这样的:(刚创建的项目里没有dist这个文件夹,dist是打包后的项目文件夹)

vue-awesome-swiper的用法&同一页面有多个swiper如何使用

项目结构

完整的代码是这样的,包含html、js、css ,文章末尾附上了vue router的配置内容,以及package.json 的内容 :

main.js 内容如下:

App.vue 的内容是这样的

home.vue 的内容是这样的(使用vue-awesome-swiper的页面)

文章最后顺手放上router文件夹下的两个js文件的内容:

index.js的

router.js的

以及 package.json 的内容:

项目打包:

执行之后,会自动生成一个跟 src 文件夹同级的 dist 目录,打成压缩包发给运维放服务器对应位置即可。

项目打包之后因为要放到服务器的一个子目录里,根目录下已经有一个项目了,所以要对config文件夹下的index.js 的build对象作一个修改

未经允许不得转载:一点博客-青梅煮码-共享博客 » vue-awesome-swiper的用法&同一页面有多个swiper如何使用
分享到:
赞(1) 打赏

评论抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏