vue卡片式点击切换图片组件

vue卡片式点击切换图片组件

因为公司业务的问题，最近在写vue项目，有了一个卡片图片的点击的需求，自己又不想写动画效果，就偷个懒，采用vue是以数据驱动的原理，写了一个不太完整的vue组件，为了简单，就直接上代码吧

全部代码

未进行props传参设置，以后完善（简单最好嘛）

<template>
	<!-- 
	*以数据驱动的card式展示图片（无动画效果）
	*  -->
	<div class="cardBanner">
			<ul>
				<li v-for="(item,index) in cardData" :key="index">
					<a href="#">
						<img :src="item.src" alt="">
						<p>这图片的描述{{item.order}}</p>
					</a>
				</li>
				<div class="arrow-left" @click="toggleFun(-1)">&lt;</div>
				<div class="arrow-right" @click="toggleFun(1)">&gt;</div>
			</ul>
	</div>
</template>

<script>
	export default {
		data(){
			return {
				cardData: [
					{id:1,src:require('../assets/images/banner.jpg'),},
					{id:2,src:require('../assets/images/text.jpg')},
					{id:3,src:require('../assets/images/组6@2x.png')},
					{id:4,src:require('../assets/images/text.jpg')},
					{id:5,src:require('../assets/images/banner.jpg')}
				]
			}
		},
		methods: {
			//通过函数改变数据从而达到视图的改变
			toggleFun(p){
				this.cardData = this.cardData.map((item,index,array) => {
					if(index===array.length-1&&p===1){
						item = array[0]
					}
					else if(index===0&&p===-1){
						item = array[array.length-1];
					}else{
						item = array[index+p];
					}
					return item;
				})
			}
		}
	}
</script>

<style scoped>
.cardBanner{
	padding: 10px 30px;
	background-color: #fff;
	border: 1px solid #ccc;
	position: relative;
}
.cardBanner ul{
	display: flex;
	overflow: scroll;    /*设置滚动条*/
}
.cardBanner ul::-webkit-scrollbar{    /*隐藏滚动条*/
	display: none;
}
.cardBanner ul>li{ //高能部分，flex不太好解释
	width: 31.33333%;
	flex-shrink: 0;
	padding-left: 3%;
	text-align: center;
}
.cardBanner ul>li:first-child{
	padding-left: 0;
}
.cardBanner ul>li a{
	display: block;
	width: 100%;
	height: 100%;
}
.cardBanner ul>li img{
	width: 100%;
	height: 170px;
	border-radius: 5px;
}
.cardBanner ul>li p{
	margin: 0;
}
[class^='arrow']{
	font-size: 30px;
	transform: scaleX(.7);
	color: #ddd;
}
.arrow-left{
	position: absolute;
	left: 5px;
	top: 50%;
	margin-top: -17px;
}
.arrow-right{
	position: absolute;
	right: 5px;
	top: 50%;
	margin-top: -17px;
}
</style>

效果展示

稍微讲一下

采用flex!!!