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/组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!!!

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

(0)

相关推荐

  • vue2.0中click点击当前li实现动态切换class

    1,文件内容 ----//为item添加不存在的属性,需要使用vue提供的Vue.set( object, key, value )方法.  看详解:https://cn.vuejs.org/v2/api/#Vue-set <template> <div> <ul> <li v-for="(item,$index) in items" @click="selectStyle (item, $index) " :class=&

  • vue实现点击按钮切换背景颜色的示例代码

    用vue简单的实现点击按钮切换背景颜色,具体代码如下所示: <div class="btnTitle"> <div class="btn-bg" :class="{bg:time == 3}" @click="changeBg(3)">15天</div> <div class="btn-bg" :class="{bg:time == 4}" @c

  • Vue点击切换颜色的方法

    如下所示: <template> <div> <div v-for="(list,index) in siYuan" class="aa" :class="{ red:changeRed == index}" @click="change(index)">{{list.a}}</div> </div> </template> <script>

  • Vue 菜单栏点击切换单个class(高亮)的方法

    步骤: 遍历对象(goods)获取菜单栏每一项的对象(item)和下标(index) 添加点击事件toggle(),传入下标参数:@click="fn1();fn2()" 动态切换classname::class="{'active':index ==checkindex }"> (class赋予对应下标值的DOM) ps:该方法直接切换class,不需要手动添加清除其他非动态DOM的class html <ul> <li v-for=&qu

  • Vue2.0点击切换类名改变样式的方法

    1.使用index <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible

  • vue中选项卡点击切换且能滑动切换功能的实现代码

    具体代码如下所述: <div> <div class="navlist"> <ul> <li class="navli" v-for="(item,index) in navList" :class="{'activeT':nowIndex===index}" @click="tabClick(index)"><i>{{item.name}}<

  • Vue实现点击后文字变色切换方法

    这里用文字举例,图片切换的原理也是一样的 大概思路是:用两个class相同的span分别是切换前后的文字,class相同主要是为了变换前后的文字位置相同.然后用click事件控制它们的显隐. 代码如下: HTML: <span class="response" v-show="!showCommentInput" @click="showCommentInput = !showCommentInput">回复</span>

  • Vue实现active点击切换方法

    循环的情况: 1.点击时传入index索引(获取当前点击的是哪个) @click="active(index)" 2.将索引值传入class(索引等于几就第几个添加active类) :class="{active:index==ins}" 3.在data里边添加ins:0(表示默认第一个添加active类) data{ ins:0 } 4.最后在methods里边添加方法 ctive (num) { this.ins=num } 非循环的情况: 1.在标签内写入点击

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

    本文实例为大家分享了vue卡片式点击切换图片组件,供大家参考,具体内容如下 因为公司业务的问题,最近在写vue项目,有了一个卡片图片的点击的需求,自己又不想写动画效果,就偷个懒,采用vue是以数据驱动的原理,写了一个不太完整的vue组件,为了简单,就直接上代码吧 全部代码 未进行props传参设置,以后完善(简单最好嘛) <template> <!-- *以数据驱动的card式展示图片(无动画效果) * --> <div class="cardBanner"

  • Vue的事件响应式进度条组件实例详解

    写在前面 找了很多vue进度条组件,都不包含拖拽和点击事件,input range倒是原生包含input和change事件,但是直接基于input range做进度条的话,样式部分需要做大量调整和兼容性处理.即使做好了,将来需要修改外观,又是一番折腾. 基于以上两个原因,做了一个可以响应input和change事件(即一个是拖动进度条到某处,一个是在进度条某位置点击使其值变为该位置)的div实现的Vue组件,这样既满足了对进度条事件的需求,也带来了如有需求变动,样式修改很方便的好处. 效果图 以

  • vue实现移动端H5数字键盘组件使用详解

    本文实例为大家分享了vue实现移动端H5数字键盘组件的使用代码,供大家参考,具体内容如下 我们平时扫码付款的时候,经常会输入一些数字进行付款,仔细看了下键盘和系统的键盘有点不一样,于是今天买甘蔗的时候扫码付款就想了一下要怎么去实现一个.话不多说,直接上代码. 结果如下: 代码如下: <template> <div class="keyboard-wrapper"> <input type="text" v-model="NUM

  • vue实现过渡动画Message消息提示组件示例详解

    目录 概述 目录结构 总结 概述 在我自己平时做项目的时候,必不可少的会用到message组件,用来对用户友好反馈,总之使用频率还是挺高的,刚开始工作的时候,经常用的就是组件库的现成的,想想也不能总是用别人现成的,最近模拟组件库调用方式自己写了一个消息提示组件,支持过渡效果,支持自己进行扩展. 目录结构 .src/component/MessageBox/MessageBox.vue代码: <template> //css实现过渡 <transition name="fade-

  • vue3.0实现点击切换验证码(组件)及校验

    本文实例为大家分享了vue3.0实现点击切换验证码(组件)及校验的具体代码,供大家参考,具体内容如下 先看效果 父组件 <template> <div class="login"> <van-field center clearable label="验证码" placeholder="输入验证码" v-model="verify" > <template #button> &l

  • JavaScript onclick点击事件-点击切换图片且自动播放

    在页面中放图片并设置四个button,可以通过点击上一张下一张来切换图片(翻到最后一张自动切换到第一张).用户点击自动播放,每隔两秒自动切换(类似轮播图),点击停止播放,就终止播放,运用了定时器.先看效果图.  下面是完整的代码: <body>     <img id="img" src="./img/0.webp" alt=""><br>     //给四个button加上点击事件     <butto

  • JavaScript onclick点击事件-点击切换图片且自动播放

    在页面中放图片并设置四个button,可以通过点击上一张下一张来切换图片(翻到最后一张自动切换到第一张).用户点击自动播放,每隔两秒自动切换(类似轮播图),点击停止播放,就终止播放,运用了定时器.先看效果图.  下面是完整的代码: <body>     <img id="img" src="./img/0.webp" alt=""><br>     //给四个button加上点击事件     <butto

  • Vue transx组件切换动画库示例详解

    目录 来个介绍 安装 使用 支持参数 支持事件 支持API 支持的动画类型 说明 来个介绍 先奉上组件库的名称:transx github地址:github.com/tnfe/transx npm参考: www.npmjs.com/package/tra… 示例地址:codesanbox 安装 npm install transx or yarn add transx 使用 <!-- 包裹动画元素 --> <trans-x :time="time" :delay=&q

随机推荐