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/ [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!!
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.