前端
轮播图组件(@/home/BannerBox)
在VantUI的展示组件中找到轮播图
1
2
3
4
5
6
<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
<van-swipe-item>1</van-swipe-item>
<van-swipe-item>2</van-swipe-item>
<van-swipe-item>3</van-swipe-item>
<van-swipe-item>4</van-swipe-item>
</van-swipe>
data里生成一个用于盛放轮播图路径的对象bannerList
1
2
3
4
5
6
7
8
9
10
<script>
export default {
data () {
return {
bannerList: []
}
},
methods: {
},
直接写定对象数据
1
2
3
4
5
6
7
8
9
created () {
this.bannerList = [
{ id: 1, img: '/static/home/banner/banner1.jpg' },
{ id: 2, img: '/static/home/banner/banner2.jpg' },
{ id: 3, img: '/static/home/banner/banner3.jpg' }
]
}
}
</script>
放入BannerBox.vue中，并将要轮播的图片换成素材库里的图片（使用v-for遍历bannerList对象以获得所有的轮播图）
1
2
3
4
5
6
7
8
9
10
<template>
<!-- 首页轮播图 -->
<div class="home-banner-box">
<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
<van-swipe-item v-for="item in bannerList"
:key="item.id">
<img :src="item.img" alt="">
</van-swipe>
</div>
</template>
Home页面中引用轮播图组件(@/views/HomeView)
引入组件
1
2
3
4
5
6
7
8
9
10
11
12
<script>
// banner
import Banner from '@/components/home/BannerBox'
export default {
name: 'HomeView',
components: {
// banner
Banner
}
}
</script>
展示
1
2
3
4
5
6
<template>
<div class="home">
<!-- banner -->
<Banner/>
</div>
</template>
优化样式
轮播图占比空间太大
1
2
3
4
5
6
7
8
<style lang="less">
.home-banner-box {
img {
width: 100%; //填满左右两边
height: auto; // 上下大小自适应
}
}
</style>