纯净、安全、绿色的下载网站

首页|软件分类|下载排行|最新软件|IT学院

当前位置:首页IT学院IT技术

vue卡片式点击切换图片组件 vue卡片式点击切换图片组件使用详解

结城   2021-06-24 我要评论
想了解vue卡片式点击切换图片组件使用详解的相关内容吗结城在本文为您仔细讲解vue卡片式点击切换图片组件的相关知识和一些Code实例欢迎阅读和指正我们先划重点:vue卡片式点击切换图片组件,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)"><</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/组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!!!


相关文章

猜您喜欢

  • Feign post/get请求 使用Feign消费服务时POST/GET请求方式详解

    想了解使用Feign消费服务时POST/GET请求方式详解的相关内容吗justry_deng在本文为您仔细讲解Feign post/get请求的相关知识和一些Code实例欢迎阅读和指正我们先划重点:Feign消费服务,POST请求方式,GET请求方式下面大家一起来学习吧..
  • feign传递参数 feign实现传递参数的三种方式小结

    想了解feign实现传递参数的三种方式小结的相关内容吗想喝咖啡的Alex在本文为您仔细讲解feign传递参数的相关知识和一些Code实例欢迎阅读和指正我们先划重点:feign参数,传递参数下面大家一起来学习吧..

网友评论

Copyright 2020 www.gamerfx.net 【游戏天空】 版权所有 软件发布

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 点此查看联系方式