客服电话
APP下载
迪恩网络APP
随时随地掌握行业动态
官方微信
扫描二维码
关注迪恩网络微信公众号
|
本文实例为大家分享了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)"><</div>
<div class="arrow-right" @click="toggleFun(1)">></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/组[email protected]')},
{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!!! 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持极客世界。 |
请发表评论