这篇文章主要介绍“vue卡片式点击切换图片组件使用”,在日常操作中,相信很多人在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!!!
到此,关于“vue卡片式点击切换图片组件使用”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注亿速云网站,小编会继续努力为大家带来更多实用的文章!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。