tab动画 vue_【Vue】关于vue动画,实现tab切换页面时左右滑动效果

2023-10-26

今天要想做一个类似于app切换效果的demo,既点击

这个时,获取相应数据

动画已经加上了,但是不知道怎么才能进行切换

像进入详情页那个,已经有办法解决了,但是tab切换这个却发现无从下手,哪位大神能给提供一下思路吗,或者提供一个方案,demo都好,万分感谢!!

不想使用插件的哦,只想用vue+vuex+vue-router+transition来实现

补充

是样式写少了还是什么原因呢,我感觉这样好像就够了

解决:

原来我路由配置的时候,每一个tab页面引入的都是同一个文件,只要把列表页封装成一个组件,然后路由配置,不同主题列表引入不同的文件,即可解决

回答

写了会配置路由么?

路由配置上就行了。

至于是左滑动还是右滑动,可以动态绑定name,注册路由时meta中写上索引

{

path: '/supervise',

name: 'supervise',

component: Supervise,

meta: { index: 2 }

},

在当前tab组件watch $route

watch: {

$route(to, from) {

if(to.meta.index < from.meta.index) {

this.transitionName = "slide-forward"

} else {

this.transitionName = "slide-back"

}

}

}

在父组件定义一个变量,子组件传值状态值到父组件。v-if判断状态,展现不同的组件就行了,非常简单

谁有demo ??

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

tab动画 vue_【Vue】关于vue动画,实现tab切换页面时左右滑动效果 的相关文章

  • Linux内核Backlog笔记

    一 listen方法传入的backlog参数 net core somaxconn 这个参数具体意义 先看看Linux Socket的listen解释 man listen include
  • C++报错类型elemType classType::member is protected within this context的解决思路

    C 报错类型elemType classType member is protected within this context的解决思路 问题背景 在对象类尝试增加友元函数 什么是友元函数 在类中增加友元类 问题背景 在查看 lt lt
  • yolo算法

    YOLO系列算法是一类典型的one stage目标检测算法 其利用anchor box将分类与目标定位的回归问题结合起来 从而做到了高效 灵活和泛化性能好 所以在工业界也十分受欢迎 接下来我们介绍YOLO 系列算法 1 yolo算法 Yol
  • 【VMware】虚拟机不能全屏的解决方法

    之前装了vmware workstation 8 最近装上新的ubuntu发现不能全屏 网上搜索后发现是因为没有安装vmware tools 现在就将本人安装vmware tools的过程介绍如下 1 加载vmwaretools 1 如下图
  • SQL语句中的in/exist/NOT IN/NOT EXIST的联系与区别

    IN EXIST NOT IN NOT EXIST的效率比较 由于使用使用not in 进行查询时 不会使用索引 所以not in 在任何情况下 效率都是最差的 而not exist和 exist两者效率是一致的 接下来主要辨析IN和EXI
  • DAMA学习笔记

    第1章 数据管理 1 1 引言 1 数据管理 为了实现数据价值 制定计划 制度并执行 监督 2 数据管理专业人员 技术人员 数据库管理员 网络管理员 程序员 和业务人员 数据管理专员 数据策略师 首席数据官 1 1 1 业务驱动因素 信息和
  • C++ Template Class List

    转载请注明 http blog csdn net c602273091 article details 50717999 Introduction STL STL Standard Template Library 标准模板库 是惠普实验室
  • 时序分析 30 金融资产预测 - 蒙特卡洛模拟

    金融资产预测 蒙特卡洛模拟 商业经营活动中经常需要预测其收入 成本和利润 企业中的金融团队很可能会被要求构建金融模型进行场景分析 例如在不同的假设的情况下分析最好的情况 正常情况和最差的情况 这样做的目的主要是为管理层提供在不同的市场情况下
  • Overleaf latex绘制三线表

    在 begin document 前加入以下内容 usepackage array 需要用到该宏包 usepackage footnote makesavenoteenv tabular 示例 begin table htbp captio
  • Windows向日葵连接Ubuntu时“连接已断开”解决方案

    环境 控制端 Windows10 系统 向日葵版本12 5 1 44969 被控端 Ubuntu20 04 系统 默认gdm3桌面 向日葵版本11 0 0 36662 问题描述 使用windows端向日葵远程连接ubuntu主机时出现 连接
  • 【springboot】 整合 jasypt 配置信息加密

    项目集成jasypt的方式 引入jasypt spring boot加密组件 通过jasypt spring boot这个开箱即用的加密组件来引入Jasypt这个强大的加密库 方式一 在Springboot应用程序中 如果使用了 Sprin
  • 2020最新版Python学习路线图--Python基础重点知识

    Python学习路线图的第一阶段Python基础的学习 Python学习这一阶段的学习目标是掌握Python基础语法 具备基础的编程能力 建立起Python学习编程思维以及面向对象程序设计思想 能够熟练使用Python技术完成针对小问题的程
  • zipkin学习--07--Springboot 集成 Zipkin--持久化到数据库

    一 介绍 Zipkin目前只支持mysql数据库 只需要修改 Zipkin服务端 二 总体结构 代码位置 https gitee com DanShenGuiZu learnDemo tree master zipkin learn 2 1
  • keycloak单点登录(浙政钉2.0扫码、手机号验证码登录)

    写在前面 本篇博客只针对前端代码实现 keycloak配置什么的 自己和后端或者运维联调吧 说实在的 因为不熟悉keycloak代码的逻辑 再加上时间紧 所以搞了一些很多骚操作 登录这些前端代码是写在keycloak项目里的 文件是 ftl
  • 用JS jquery取float型小数点后两位

    用JS jquery取float型小数点后两位1 最笨的办法 我就怎么干的 function get var s 22 127456 var str s substring 0 s indexOf 3 alert str 2 正则表达式效果
  • 【机器学习】奇异值分解

    奇异值分解 1 概述 奇异值分解 singular value decomposition SVD 是一种矩阵因子分解方法 是线性代数的概念 但在统计学习中被广泛使用 奇异值分解可以被概括为能够将任意一个 m n m times n m n
  • FileUtil.class.getClassLoader().getResource()返回空值null:解决办法

    String path FileUtil class getClassLoader getResource resources table xml 其中FileUtil是我自定义的工具类 之前的项目中通过FileUtil class get
  • 基于51单片机的电子密码锁设计

    功能 本实例是基于51单片机的电子密码锁 主要硬件由51单片机最小系统 LCD1602液晶屏电路 继电器控制电路 AT24C02存储电路 LED指示灯电路 矩阵按键电路构成 1 系统采用LCD1602液晶屏作为显示屏 第一行电子锁的状态 第
  • 最短路径—dijkstra算法(poj2387)

    Til the Cows Come Home Time Limit 1000MS Memory Limit 65536K Total Submissions 68201 Accepted 22898 Description Bessie i

随机推荐

  • xmlns:android="http://schemas.android.com/apk/res/android"详解

    在Android的layout文件夹下的 xml文件中 开头有一条配置语句 xmlns android http schemas android com apk res android 1 整句话的作用是声明命名空间的引用 2 xmlns是
  • 各类数据库随机查询的方法

    1 mysql随机查询 select from 表名 order by rand limit 随机查询的数量 2 sql server随机查询 select top 随机查询的数量 from 表名 order by newid 3 orac
  • 1124:成语接龙 dfs+一维数组保存结果

    题目描述 小明在玩成语接龙的游戏 成语接龙的规则是 如果成语A的最后一个汉字与成语B的第一个汉字相同 那么成语B就可以接到成语A的后面 小明现在手上有一本成语词典 每次他都得花费一定时间来从当前的成语查到下一个可以接在后面的成语 现在给你一
  • transformer系列2---transformer架构详细解析

    transformer详细解析 Encoder 1 输入 1 1 Embedding 词嵌入 1 1 1 Embedding 定义 1 1 2 几种编码方式对比 1 1 3 实现代码 1 2 位置编码 1 2 1 使用位置编码原因 1 2
  • System、Math、BigInteger和BigDecimal

    一 System System类代表系统 系统级的很多属性和控制方法都放置在该类的内部 该类位于java lang包 由于该类的构造器是private的 所以无法创建该类的对象 也就是无法实例化该类 其内部的成员变量和成员方法都是stati
  • Python学习心得记录

    文章目录 MongoChef工具的使用 查询记录 删除记录 获取当前日期 地板除 去掉空格 for循环 文件清空 split函数 明确需求 py中执行py os system execfile import PhantomJS过时问题 打印
  • 【数组】- 如何在C++中把元素插入有序数组?

    数组逆序 数组是C 语言重要的数据结构 对它的一些基本操作要熟练掌握 今天 我们就来讨论 怎么把元素的插入有序数组的问题 案例 题目描述 给你一个整数n和一个数列 数列个数不超过1000 这个数列保证从小到大排列 现要求将这个整数n插入到数
  • 【爬虫】Python使用动态IP,多线程,爬取uncomtrade的数据

    联合国贸易统计数据库UNCOMTRADE是国际海关组织汇总所有成员上报的各自进出口贸易情况的综合信息数据库 是进行国际贸易分析的必不可少的数据来源 联合国贸易统计数据库中提供国际海关组织的多种商品分类标准数据查询 包括HS2002 HS19
  • 最近爆火的超级可爱的猫猫回收站设置教程

    这个回收站图标真的好可爱啊 图标地址 https emlog lanzouj com ixoSF05jp4gf
  • EF 数据库的字段类型为float,C#类型为float时异常,Unable to cast object of type 'System.Double' to type 'System.Single

    数据库的字段 类型 float 代表从 1 79E 308 到 1 79E 308 之间的浮点数字数据 占用8字节 类型 real 代表从 3 40E 38 到 3 40E 38 之间的浮点数字数据 占用4字节 而C 中 类型 double
  • 《C++11标准库》5.1.1Pair

    class pair 可将两个 value视为一个单元 C 标准库内多处用到了这个 class 尤其是容器 map multimap unordered map和 unordered multimap就是使用 pair 来管理其以 key
  • Windows下Nginx的启动、停止等命令

    注意不要直接双击nginx exe 这样会导致修改配置后重启 停止nginx无效 需要手动关闭任务管理器内的所有nginx进程 在nginx exe目录 打开命令行工具 用命令 启动 关闭 重启nginx start nginx 启动ngi
  • 分布式系统SDK端重试策略

    分布式系统SDK端重试策略 1 API 的属性 成功率优先 强调成功率 所以重试的时候 sleep 时间较长 按照指数退避的方式sleep latency优先 强调latency 所以重试的时候 sleep的时间较短 2 重试次数 retr
  • node.js -- koa

    node js koa koa 1 koa介绍 2 koa使用 2 1 Application对象 2 2 上下文content对象常用属性及方法 2 3 中间件 2 4 koa常用中间件 koa router koa static koa
  • LeetCode 0096. Unique Binary Search Trees

    问题简析 给定整数n 有多少个不同的储存1 n的二叉搜索树 二叉搜索树 BST 要求左子树结点都比当前结点小 右子树结点都比当前结点大 思路 动态规划 设f n 为有n个数字时可以构建多少种不同的树 则起始状态为 f 0 1 f 1 1 f
  • apt-get命令详解(超详细)

    原文链接 apt get命令详解 超详细 迎面暖风的博客 CSDN博客 apt get 参数 h 帮助文件 q 输出到日志 无进展指示 qq 不输出信息 错误除外 d 仅下载 不安装或解压归档文件 s 不实际安装 模拟执行命令 y 在需要确
  • odoo16数据导出报错

    最近做项目 下载了odoo16的最新版 SELECT latest version FROM ir module module WHERE name base 16 0 1 3 导出数据的时候报错 连续装了两台机器都是报这个错误 很明显 这
  • 绿洲显示服务器,最后的绿洲登录不上怎么办 最后的绿洲登录失败解决方法推荐-游侠网...

    最后的绿洲登录不上怎么办 最后的绿洲是一款主打pvp的开放世界生存游戏 下面小编给大家带来了最后的绿洲登录失败解决方法推荐 还不了解的玩家不妨进来看看 最后的绿洲登录失败解决方法推荐 1 服务器并没有关闭 无论显示Oasis offline
  • 【中国电工技术学会主办】2022年能源,电力与电气工程国际研讨会(CoEEPE 2022)

    中国电工技术学会主办 2022年能源 电力与电气工程国际研讨会 CoEEPE 2022 重要信息 会议网址 www coeepe org 会议时间 2022年11月11 13日 召开地点 安徽合肥 合肥滨湖国际会展中心 截稿时间 2022年
  • tab动画 vue_【Vue】关于vue动画,实现tab切换页面时左右滑动效果

    今天要想做一个类似于app切换效果的demo 既点击 这个时 获取相应数据 动画已经加上了 但是不知道怎么才能进行切换 像进入详情页那个 已经有办法解决了 但是tab切换这个却发现无从下手 哪位大神能给提供一下思路吗 或者提供一个方案 de