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!!!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

以上是 vue卡片式点击切换图片组件使用详解 的全部内容, 来源链接: utcz.com/p/239346.html

回到顶部