美文网首页程序猿阵线联盟-汇总各类技术干货让前端飞vue
8.轮播图组件及vue-awesome-swiper的引入(手把

8.轮播图组件及vue-awesome-swiper的引入(手把

作者: ComfyUI | 来源:发表于2018-05-30 11:51 被阅读261次

    GitHub:https://github.com/Ewall1106/mall

    一、新建home.vue

    1、上篇我们为了便于展示,把头部my-header组件放在了App.vue页面,现在我们删掉App.vue里面的头部组件然后我们在view文件里面新建一个home.vue页面,然后把头部组件和今天要讲的轮播图组件都放在home.vue页面。

    home.vue

    2、在routerindex.js中配置路由,将home.vue组件映射到根路由/

    router

    ok,关于对上篇的修改完成。

    二、新建轮播图组件

    1、我们命名为carousel,初始样子为这样;

    carousel.vue

    2、然后去home.vue里面引入这个轮播图组件,引入的方式跟头部组件一样,不多阐述。

    三、引入swiper实现轮播图效果

    1、关于vue-awesome-swiper
    vue-awesome-swiper是我个人比较倾向的一个轮播图开源组件,GitHub地址在这里:https://github.com/surmon-china/vue-awesome-swiper,官网介绍这里:https://surmon-china.github.io/vue-awesome-swiper/;官网从安装到使用都介绍的很详细了,大家可以去看看;ok,我们从官网选取一种轮播图效果作为我们项目的轮播图,就这个了

    swiper

    2、用npm安装vue-awesome-swiper

    ① 在命令行中输入安装依赖

    $ npm install vue-awesome-swiper --save
    
    npm

    ② 然后我们去package.json中看看是否存在

    package.jcon

    3、怎么用
    ok,现在安装完成了,我们怎么在项目中使用?GitHub上说的很明白了,我们一步步来。

    (1)GitHub上提供了多种使用方式,我们要在vue项目中要用到的主要是选全部引入还是组件中引入,这里我们选第二种:

    github

    (2)我们按照它的来在项目中引入:

    carousel.vue中引入

    (3)html的结构也按照它提供的来复制粘贴一下到carousel.vue中:

    github

    我们的template结构把右箭头、左箭头什么的注释掉

    carousel的html结构

    script中的参数添加分页参数和自动轮播两个参数,具体参数注释上也上说的很清楚了,跟swiper官方api参数一样(http://www.swiper.com.cn/api/index2.html

    js

    四、最后我们去浏览器看看效果

    localhost

    然后修改一下样式变成这样:

    添加样式

    (ps:关于Luxury主题的图片实在是太难找了,考虑换个主题)

    参考学习

    https://github.com/surmon-china/vue-awesome-swiper
    http://www.swiper.com.cn/api/index2.html

    相关文章

      网友评论

      • 78a997385f41:讲得挺不错的嘛,就想问什么时候能到mongoDB呀:flushed: 后台才是关键:joy_cat:
        ComfyUI:@Vue拓荒 谢谢肯定,先把前端写完吧
      • 2bb309d5256f:全局引入之后在组件内调用就可以了吗?需不需要写import 'swiper/dist/css/swiper.css'?我之前引入是直接将swiper下载下来引入的
        ComfyUI:全局应该不用

      本文标题:8.轮播图组件及vue-awesome-swiper的引入(手把

      本文链接:https://www.haomeiwen.com/subject/geytsftx.html