小白用140代码写一个vue移动端轮播图组件

轮播图在项目中，是属于必不可少的一环，基本每个项目都会有，网上的轮播图插件也有千千万万，不可否认它们的功能都非常的强大，但有的时候，我们只是需要简简单单的轮播，而不需要那么多的动画功能和、特效，而我又有强烈的代码洁癖，虽然说不要反复造轮子，但是自己穿多大码的鞋子，自己知道，根据自己的业务，自己动手做一个，即轻小，又可以锻炼自己的动手能力，一举夺得呢。

首先来看看我实现的效果，全屏宽：

非全屏宽，局部效果： 看起来还是不错的，现在让我们来开始吧！

首先是 - html部分

复制代码

这里我使用了插槽，这样可以由父组件直接操作，而不需要传入反复组件传参

css 部分

复制代码

我习惯使用less进行css编写，在本组件中，我使用了flex布局，而没有使用float布局，因为张鑫旭大大曾说过，浮动是魔鬼啊。 我在此并没有打开vue的scoped属性，虽然这样可能会造成和其他组件冲突，由于我的业务比较简单，而且打开scoped就不能由本组件控制父组件的样式，所以就不打开scoped属性了，当然为了防止冲突，还可以设立自己的命名空间，比如把轮播图的类名设为xiaoming-swiper，以自己的名字命名，总不太可能引起css冲突了吧？

最最重要的Js部分

复制代码

main.js全局注册组件

import swiper from './assembly/swiper.vue'
Vue.component('swiper', swiper)
复制代码

我在本项目中使用的是全局注册组件，因为这个轮播图需要使用的地方有点多。如果你的项目中轮播图使用的很少，那我推荐局部注册。

父组件调用轮播图

"box">
    "5">
      "/goods/1" v-for="x of 5" :key="x" class="swiper-item">
        "https://user-gold-cdn.xitu.io/2017/12/27/1609723e9449c30e">
      
    

复制代码

你可能发现了，我在组件外嵌套了一层box，这是因为我用的是这个box来控制轮播图的宽度。

至此，一个轮播图组件就完成啦，是不是很简单呢？本人也是第一次写，如果您有任何的问题或者建议，我们一起讨论哦。

关于我：非科班出身的不知名应届毕业生、代码洁癖患者，梦想有朝一日成为前端大牛。
复制代码

转载于:https://juejin.im/post/5a4358ca6fb9a04517057acc