Vue项目增加首页轮播图功能

实际需求

多家工厂共用一个系统,希望能在登录页体现多家的特色,一家工厂希望展示多张照片!

研发

第一次写这类需求,主要采用Swiper实现,参考官网,中文教程-->在Vue中使用低版本Swiper(3/4)。注意不同版本的会有所不同,下面记录的是3.x版本的使用！

安装插件

npm install vue-awesome-swiper@3 --save-dev

使用

// DOM结构
<swiper class="swiper" :options="swiperOption">
  <swiper-slide class="swiper-slide">
    <img class="swiper-img" :src="slide.url" alt="登陆背景图片">
  </swiper-slide>
</swiper>

// js文件
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
export default {
  components: { swiper, swiperSlide },
  .....
  swiperOption: {
  loop: true, // 让轮播图循环起来
  autoplay: {
    delay: 3000, // 自动播放
    disableOnInteraction: false // 关闭手动切换
  }
}
}

<style lang='scss' scoped>
  .swiper{
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  &-img {
    width: 100%;
    height: 100%;
    object-fit: fill;
  }
}
</style>

具体实现代码如上，可通过option进行一些自定义的配置,让轮播图进行循环播放等,在created里面可以去请求后端接口动态获取内容进行渲染等！

小结

至此完成了首页添加轮播效果!持续记录开发过程中遇到的第一次！