Vue 仿咕咚运动Swiper轮播

序言

最近空闲的时候偶然看到一个效果,类似于轮播的效果,话不多说,直接看图:

image

咕咚运动里面的,然后本着巩固 Vue 知识的目的,用Vue实现了一把,用到的就是 swiper 这个插件,下面我来介绍一下用法:

1、第一步

在创建好的 Vue 项目中使用下面的命令来下载 swiper

npm install vue-awesome-swiper --save

2、第二步

然后在文件中引入 swiper 组件和 样式表:


3、第三步

然后就可以使用 swiper 了:

    
      
      
        
      
    

然后关于 swiper 组件的一些设置,可以去swiper中文官网查阅

Github地址

小白请先看这里

1、初识前端
2、初识JavaScript
3、Android开发人员不得不学习的JavaScript基础(一)
4、Android开发人员不得不学习的JavaScript基础(二)
5、Android开发人员不得不学习的Vue.js基础

公众号

欢迎关注我的个人公众号【IT先森养成记】,专注大前端技术分享,包含Android,Java,Kotlin,Flutter,HTML,CSS,JS等技术;在这里你能得到的不止是技术上的提升,还有一些学习经验以及志同道合的朋友,赶快加入我们,一起学习,一起进化吧!!!

公众号:IT先森养成记

你可能感兴趣的:(Vue 仿咕咚运动Swiper轮播)