精华内容
下载资源
问答
  • 今天给大家分享3个超丝滑Vue卡片左右、上下滑动层叠组件VueCardSlide。1、vue-tantan-stack一款基于 vue.js 制作的仿探探效果滑动组件。支持左右拖动或点击按钮切换效果。功能分析堆叠滑动的功能很简单,用一张图...

    今天给大家分享3个超丝滑Vue卡片左右、上下滑动层叠组件VueCardSlide。

    4ccc685f9b6d9cd139f16979821a25ea.png

    1、vue-tantan-stack

    一款基于 vue.js 制作的仿探探效果滑动组件。支持左右拖动或点击按钮切换效果。

    25533a32f09a67ef3ea7d7301241fa0b.gif

    功能分析

    堆叠滑动的功能很简单,用一张图概括就是

    f1c9b91525d2cb96867f06dac9b7b9d2.png

    堆叠效果

    堆叠图片效果在网上有大量的实例,实现的方法大同小异,主要通过在父层设定 perspective 及 perspective-origin,来实现子层的透视,子层设定好 translate3d Z轴数值即可模拟出堆叠效果。

    // 图片堆叠dom

    上面只是一组静态代码,我们希望得到的是vue组件,具体实现方法大家可以去参看源码。

    安装

    $ npm i vue-tantan-stack -S

    使用组件

    prev next
    fa12180f08204368738eab69f33d5545.gif

    最后附上demo及项目地址

    # demo地址https://warpcgd.github.io/vue-tantan-stack/# 仓库地址https://github.com/warpcgd/vue-tantan-stack

    2、vue-card-slide

    基于 vue2.x 构建的卡片拖动切换组件。和第一个有些类似,不过实现方式不一样,大家可以去看看。

    18b195c4070aa6b3a1237f3211f5952b.gif

    项目结构

    30a973a0c2171861b6197c1eb5023afc.png

    安装

    $ npm i vue-card-slide -S

    使用组件

    # 项目github地址https://github.com/Carrie999/vue-card-slide

    3、vue-slide-card

    vue层叠卡片滑动切换、卡牌动态滑动切换效果。

    228aeaf5eb17801974188a8becfb082e.gif

    大家可以根据需要自行定制一些酷炫的效果。

    # demo地址http://www.yunfengzhijia.cn/git-demo/vue-slide-card/#/# 仓库地址https://github.com/Kevin-269581661/vue-slide-card

    ok,就介绍到这里。感兴趣的小伙伴们可以去看下,欢迎交流分享。

    展开全文
  • 今天给大家分享3个超丝滑Vue卡片左右、上下滑动层叠组件VueCardSlide。1、vue-tantan-stack一款基于 vue.js 制作的仿探探效果滑动组件。支持左右拖动或点击按钮切换效果。功能分析堆叠滑动的功能很简单,用一张图...

    今天给大家分享3个超丝滑Vue卡片左右、上下滑动层叠组件VueCardSlide。

    86f6f17c13b2cd5ce77631f78fee72f3.png

    1、vue-tantan-stack

    一款基于 vue.js 制作的仿探探效果滑动组件。支持左右拖动或点击按钮切换效果。

    7129e97425cb38800fb94e345382cefd.gif

    功能分析

    堆叠滑动的功能很简单,用一张图概括就是

    72a3db23c64073f810f07cfe7a6b4e6c.png

    堆叠效果

    堆叠图片效果在网上有大量的实例,实现的方法大同小异,主要通过在父层设定 perspective 及 perspective-origin,来实现子层的透视,子层设定好 translate3d Z轴数值即可模拟出堆叠效果。

    // 图片堆叠dom

    上面只是一组静态代码,我们希望得到的是vue组件,具体实现方法大家可以去参看源码。

    安装

    $ npm i vue-tantan-stack -S

    使用组件

    prev next
    0cf58f23c77f3c347e17000ab2888fb3.gif

    最后附上demo及项目地址

    # demo地址https://warpcgd.github.io/vue-tantan-stack/# 仓库地址https://github.com/warpcgd/vue-tantan-stack

    2、vue-card-slide

    基于 vue2.x 构建的卡片拖动切换组件。和第一个有些类似,不过实现方式不一样,大家可以去看看。

    ba334fcec122e1a3fd0ecc137f39a753.gif

    项目结构

    52206adb74af3e8387a841e760cd54e7.png

    安装

    $ npm i vue-card-slide -S

    使用组件

    # 项目github地址https://github.com/Carrie999/vue-card-slide

    3、vue-slide-card

    vue层叠卡片滑动切换、卡牌动态滑动切换效果。

    cf5b11b60bb5ea4961fe3d6140f182c3.gif

    大家可以根据需要自行定制一些酷炫的效果。

    # demo地址http://www.yunfengzhijia.cn/git-demo/vue-slide-card/#/# 仓库地址https://github.com/Kevin-269581661/vue-slide-card

    ok,就介绍到这里。感兴趣的小伙伴们可以去看下,欢迎交流分享。

    展开全文
  • Vue卡列表中不同卡片显示不同背景颜色 最近做一个项目的移动端页面,需要完成一个卡列表,不同银行显示不同颜色的问题,一开始考虑过通过识别银行图标色调生成,但最后为了考虑开发成本,只做几种通用的色调。 具体...

    Vue卡列表中不同卡片显示不同背景颜色

    最近做一个项目的移动端页面,需要完成一个卡列表,不同银行显示不同颜色的问题,一开始考虑过通过识别银行图标色调生成,但最后为了考虑开发成本,只做几种通用的色调。
    具体就是用v-for命令遍历,代码

    <div class='cardlist' v-for="i in item" :key='index' :class='obj[i.bank]'></div>
    

    在data中写一个item数组

    item[{
    bank:'工商银行'
    }{
    bank:'农业银行'
    }]

    再写一个obj对象:

    obj:{
    '工商银行':'redtype',
    '农业银行':'greentype'
    }
    

    然后在style中写如redtype类和greentype类的css,还可以加入其他风格的css,当然如果要处理很多银行的话,就需要将obj单独写一个文件,并还可以写的更详细。
    其实这样做很明显不是最好的方案,主要是因为,这些东西,后端是不会做任何事,全部需要前端完成,所以很caodan…

    展开全文
  • vue卡片化轮播图组件

    千次阅读 2020-05-28 16:55:59
    vue卡片化轮播图组件 1.安装swiper npm install swiper 2.在组件中引入swiper import 'swiper/dist/css/swiper.min.css' import Swiper from "swiper" //版本是用的:"swiper":"^4.5.0" 3.页面的代码 <...

    vue卡片化轮播图组件

    1.安装swiper

    npm install swiper

    2.在组件中引入swiper

    import 'swiper/dist/css/swiper.min.css'

    import Swiper from "swiper"    //版本是用的:"swiper": "^4.5.0"

    3.页面的代码

    <template>
      <div>
        <mt-header fixed title="处方示例">
          <a slot="left" @click="$router.go(-1)">
            <mt-button icon="back"></mt-button>
          </a>
        </mt-header>
        <div class="examples">
          <div class="bannerTxt">
            {{bannerTxt}}
          </div>
          <div class="bannerBox">
            <div class="swiper-container">
              <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="(item,index) in banner" :key="index">
                  <img :src="item.picture_path" alt="">
                </div>
              </div>
            </div>
          </div>
          <div class="bannerIndex">
            <span>{{bannerIndex}}</span>/4
          </div>
          <div class="tips">
            <img src="./imgs/icon_tz.png" alt="" class="tipsImg">
            <p>请尽量保证上传的处方文字清晰可见,并保证红框内的信息完整不缺失</p>
          </div>
        </div>
      </div>
    </template>
    
    <script>
    import Swiper from 'swiper';
    import 'swiper/dist/css/swiper.min.css';
    export default {
      data() {
        return {
          bannerIndex: 0,
          bannerTxt: '手写的处方',
          banner: [
            {
              picture_txt: '手写的处方',
              picture_path: 'https://kmyhl.oss-cn-shenzhen.aliyuncs.com/e-medicine/NEXw6KmWH5.png',
            },
            {
              picture_txt: '机打的处方',
              picture_path: 'https://kmyhl.oss-cn-shenzhen.aliyuncs.com/e-medicine/ZdXbcS77SK.png',
            },
            {
              picture_txt: '机打的处方',
              picture_path: 'https://kmyhl.oss-cn-shenzhen.aliyuncs.com/e-medicine/BKfxNfcHpH.png',
            },
            {
              picture_txt: '机打的处方',
              picture_path: 'https://kmyhl.oss-cn-shenzhen.aliyuncs.com/e-medicine/d3TNrsh75a.png'
            }
          ]
        };
      },
      mounted() {
        let that = this;
        /* eslint-disable */
        let mySwiper = new Swiper('.swiper-container', {
          direction: 'horizontal', //滑动方向,可设置水平(horizontal)或垂直(vertical)。
          loop: true, // 设置为true 则开启loop模式
          autoplay: 3000, // 自动切换时间
          slidesPerView: 'auto', // 设置slider容器能够同时显示的slides数量(carousel模式)。类型:number or auto
          centeredSlides: true, // 设定为true时,active slide会居中,而不是默认状态下的居左。
          spaceBetween: 10, // 在slide之间设置距离(单位px)。
          loopAdditionaSlider: 0, // loop模式下会在slides前后复制若干个slide,,前后复制的个数不会大于原总个数。
          on: {
            slideChangeTransitionEnd: function(){
              if(this.activeIndex === 8 || this.activeIndex === 4 ) {
                that.bannerIndex = 1;
                that.bannerTxt = '手写的处方';
              } else {
                that.bannerIndex = this.activeIndex-3;
                that.bannerTxt = '机打的处方';
              }
            },
          },
        });
      },
    };
    </script>
    
    <style lang="less" scoped>
    .examples{
      position: absolute;
      top: 44px;
      left: 0px;
      right: 0px;
      bottom: 0px;
      overflow: auto;
      background-color: #f5f0f0;
      font-size: 14px;
      .tips{
        position: absolute;
        bottom: 0px;
        width: 100%;
        height: 46px;
        background-color: #b5654d;
        text-align: center;
        img{
          width: 12px;
          height: 14px;
          position: absolute;
          top: 7.5px;
          left: 12vw;
          color: #fff;
        }
        p{
          width: 240px;
          text-align: left;
          color: #fff;
          font-size: 12px;
          position: absolute;
          left: 18vw;
          top: 7px;
          line-height: 16px;
        }
      }
    }
    .bannerTxt{
      height: 60px;
      line-height: 60px;
      text-align: center;
      color: #666666;
      font-size: 15px;
    }
    .bannerIndex{
      line-height: 40px;
      text-align: center;
      color: #666666;
      font-size: 15px;
      text-align: center;
      span{
        color: #b5654d;
      }
    }
    .bannerBox{
      position: relative;
      height: 380px;
    }
    .swiper-container {
      width: 100%;
      height: 100%;
    }
    .swiper-container .swiper-wrapper .swiper-slide {
      width: 80% !important;
      overflow: hidden;
      display: flex;
      align-items: center;
    }
    .swiper-container .swiper-wrapper .swiper-slide img {
      width: 100%;
      height: 380px;
      border-radius: 5px;
    }
    .swiper-container .swiper-wrapper .swiper-slide-prev,.swiper-container .swiper-wrapper .swiper-slide-next{
      height: 340px !important;
      margin-top: 20px;
    }
    .swiper-container .swiper-wrapper .swiper-slide-prev img,.swiper-container .swiper-wrapper .swiper-slide-next img{
      width: 100%;
      height: 100%;
    }
    </style>

     

    效果图

     

     

    展开全文
  • antd+vue卡片的标题如何居中?

    千次阅读 2020-09-10 14:58:27
    antd+vue卡片的标题如何居中? 代码如下: <a-card title="卡片标题" :headStyle="{ 'text-align': 'center' }"> </a-card>
  • {{bannerTxt}} {{bannerIndex}}/4 请尽量保证上传的处方文字清晰可见,并保证红框内的信息完整不缺失import Swiper from‘swiper‘;import‘swiper/dist/css/swiper.min.css‘;exportdefault{data() {return{...
  • VUE 卡片拖拽、自动排列交换位置、拖拽数据存取 https://juejin.im/post/5da53e29e51d457822796ed8
  • {{bannerTxt}} {{bannerIndex}}/4 请尽量保证上传的处方文字清晰可见,并保证红框内的信息完整不缺失import Swiper from'swiper';import'swiper/dist/css/swiper.min.css';exportdefault{data() {return{bannerIndex...
  • 这是这次系列文章的第一篇,我自己封装了一个用vue实现的拖动卡片组件,并且发布到npm,详细地记录下来了整体制作过程。总共有三篇文章,介绍组件的制作思路和遇到的问题,以及在发布到npm上并下载使用的过程中,...
  • vue卡片化轮播图

    千次阅读 2019-06-14 15:06:00
    1.安装swiper npm install swiper 2.在组件中引入swiper import 'swiper/dist/css/swiper.min.css' import Swiper from "swiper" 3.页面的代码 <...mt-header fixed title="处方示例"&g...
  • vue卡片切换效果仿探探

    千次阅读 2019-04-17 15:00:06
    先上效果图。 大概的效果就是这样。 我不是原作者,借鉴了这个作者的代码。原作者github地址仿探探git地址 在git仓库中拷贝下代码,只需要进行稍微的改动就可以使用。 感谢这位作者,喜欢的话 给这位作者点个star吧...
  • 使用文档: https://cloud.tencent.com/developer/article/1528647 组件封装源代码 https://github.com/dwanda/dragComponent
  • 用的yarn安装,在这一步不动了 参考这篇文章的配置 顺利解决
  • vue开发中遇到类似原生这种卡片轮播,中间大两边小的需求 网上搜了下,很多都是修改前一个和后一个的高度,然后设置了margin-top,但个人感觉这样病不能保证很好的居中,在研究了官网的demo后,发现...
  • 项目场景: vue卡在 98% after emitting CopyPlugin 无报错 问题描述: npm run serve 时,卡在98% after emitting CopyPlugin不动 原因分析: 数据中存在请求空路径 解决方案: 完善路径或删除该代码; vue卡在 98%...
  • vue选项组件 @ fracto / vue-credit (@fracto/vue-credit-card) Another Credit Card Component for VueJS. VueJS的另一个信用组件。 特征 (Features) Note: Localization supports only Turkish & ...
  • 选项运行效果原理分析和实现1、动态切换class2、v-show,根据表达式之真假值,切换元素的 display CSS 属性。下面直接进入正题完整代码css部分*{margin: 0;padding: 0;}#box{width: 600px;margin: 0 auto;}.tab-...
  • Vue选项案例

    2018-10-18 15:24:15
    简单的做了一个Vue选项和任务分类Demo,非常适合初学者
  • vue选项

    2019-10-11 20:53:08
    vue选项 效果: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../js/vue.js"></script> .....
  • li{margin: 20px;list-style: none;} div {margin: 20px;} .s {display: none;} 个人首页 个人信息 个人动态 这是个人首页 这是个人信息 这是个人动态 function setTab(name,cursel,n){ for(i=1;...} }) Vue 选项
  • vue 选项切换

    2020-03-19 10:53:16
    选项切换 vue Title
  • 这里不跟大家再去把Vue文档上的一些指令用法或者基础知识再复述一遍,既然是从入门到实战,我直接将平时项目中需要实现的一些效果拆分成模块。...下面是一个样式稍微丑陋,但功能OK的选项Vue实现选...
  • vue 选项

    2021-01-18 10:10:16
    <div id="box">... 添加了cur类名,a就会改变样式 @click,:class ,v-show这三个是vue常用的指令或添加事件的方式--> <div class="tab-tit"> <a href="javascript:;" @click=".
  • 新手,我通过Vue脚手架创建Vue项目(可视化界面上创建)的时候,每次到最后一步创建项目的时候都会在一个地方,请大佬们点拨点拨 ![图片说明](https://img-ask.csdn.net/upload/202002/15/1581754453_778642.jpg) ...
  • Vue 选项效果

    2019-11-16 20:19:56
    Vue实现选项效果。 效果演示 点击CSS 点击Vue 看起来是不是有点菜单导航的感觉,下面跟随我一起来一探究竟? 代码演示 **注意:**引入Vue.js架包 <!DOCTYPE html> <html> <head> ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,468
精华内容 987
关键字:

vue卡

vue 订阅