实际需求
多家工厂共用一个系统,希望能在登录页体现多家的特色,一家工厂希望展示多张照片!
研发
第一次写这类需求,主要采用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里面可以去请求后端接口动态获取内容进行渲染等!
小结
至此完成了首页添加轮播效果!持续记录开发过程中遇到的第一次!