快捷導(dǎo)航

vue卡片式點(diǎn)擊切換圖片組件使用詳解

更新時(shí)間：2021年06月24日 17:02:51 作者：結(jié)城

這篇文章主要為大家詳細(xì)介紹了vue卡片式點(diǎn)擊切換圖片組件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了vue卡片式點(diǎn)擊切換圖片組件，供大家參考，具體內(nèi)容如下

因?yàn)楣緲I(yè)務(wù)的問(wèn)題，最近在寫(xiě)vue項(xiàng)目，有了一個(gè)卡片圖片的點(diǎn)擊的需求，自己又不想寫(xiě)動(dòng)畫(huà)效果，就偷個(gè)懶，采用vue是以數(shù)據(jù)驅(qū)動(dòng)的原理，寫(xiě)了一個(gè)不太完整的vue組件，為了簡(jiǎn)單，就直接上代碼吧

全部代碼

未進(jìn)行props傳參設(shè)置，以后完善（簡(jiǎn)單最好嘛）

<template>
 <!-- 
 *以數(shù)據(jù)驅(qū)動(dòng)的card式展示圖片（無(wú)動(dòng)畫(huà)效果）
 *  -->
 <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: {
   //通過(guò)函數(shù)改變數(shù)據(jù)從而達(dá)到視圖的改變
   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;    /*設(shè)置滾動(dòng)條*/
}
.cardBanner ul::-webkit-scrollbar{    /*隱藏滾動(dòng)條*/
 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>

效果展示