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

这篇文章主要为大家详细介绍了vue卡片式点击切换图片组件的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了vue卡片式点击切换图片组件，供大家参考，具体内容如下

因为公司业务的问题，最近在写vue项目，有了一个卡片图片的点击的需求，自己又不想写动画效果，就偷个懒，采用vue是以数据驱动的原理，写了一个不太完整的vue组件，为了简单，就直接上代码吧

全部代码

未进行props传参设置，以后完善（简单最好嘛）

   
 
  
这图片的描述{{item.order}}
 .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; } 

效果展示

稍微讲一下，采用flex!!!

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

以上就是vue卡片式点击切换图片组件使用详解的详细内容，更多请关注本站其它相关文章！