vue列表滚动动画效果
一、效果展示:
录屏2024-12-07 02.16.59
二、步骤:
1. 需要用<transition-group>包裹需要渲染的item列表
⚠️注意:这里的:key="item.id",必须要用id之类的,不能用index
<transition-group name="list" tag="div"><div class="item" v-for="(item) in list" :key="item.id"></div>
</transition-group>
2. 添加过渡动画样式
/* 过渡效果 */
.list-move {transition: transform 0.5s;
}.list-enter-active,
.list-leave-active {transition: all 0.5s;
}.list-enter-from,
.list-leave-to {opacity: 0;transform: translateY(-30px);
}.list-leave-active {position: absolute;
}
3. 添加点击item事件
这里主要是排序,通过排序让元素重新排列,产生动画
async onChangeLike(id, type, isChoose) {let res = await reqChangeLike(id, type, isChoose)if (res.code !== 200) {return Toast.fail('点赞失败')}let currentIndex = this.list.findIndex(item => item.id === id)let currentLikeCount;if (type === 'good') {if (this.list[currentIndex].likeType === 2) {this.list[currentIndex].badLike = this.list[currentIndex].badLike - 1}this.list[currentIndex].goodLike = isChoose ? this.list[currentIndex].goodLike - 1 : this.list[currentIndex].goodLike + 1this.list[currentIndex].likeType = isChoose ? 0 : 1currentLikeCount = this.list[currentIndex].goodLike;} else if (type === 'bad') {if (this.list[currentIndex].likeType === 1) {this.list[currentIndex].goodLike = this.list[currentIndex].goodLike - 1}this.list[currentIndex].badLike = isChoose ? this.list[currentIndex].badLike - 1 : this.list[currentIndex].badLike + 1this.list[currentIndex].likeType = isChoose ? 0 : 2currentLikeCount = this.list[currentIndex].badLike;}// 重新排序(点赞数一样,让新的总保持在最前面)if (this.type === 1) {this.list.sort((a, b) => {if (a.goodLike === b.goodLike && a.goodLike === currentLikeCount) {return a.id === id ? -1 : 1; // 将当前改变的项放到最前面}return b.goodLike - a.goodLike;});} else {this.list.sort((a, b) => {if (a.badLike === b.badLike && a.badLike === currentLikeCount) {return a.id === id ? -1 : 1; // 将当前改变的项放到最前面}return b.badLike - a.badLike;});}
}
三、完整代码
<template><div><HeadTop head-title="参与者" go-back="true" /><div class="container"><div class="choose-type"><div class="good" :class="{ active: type === 1 }" @click="onChangeType(1)"><van-icon name="good-job-o" :color="type === 1 ? '#3d5eb3' : ''" />好队友</div><div class="bad" :class="{ active: type === 2 }" @click="onChangeType(2)"><van-icon style="transform: rotate(180deg)" name="good-job-o":color="type === 2 ? '#3d5eb3' : ''" />猪队友</div></div><div class="list"><transition-group name="list" tag="div"><div class="item" v-for="(item) in list" :key="item.id"><van-image round width="1.0667rem" height="1.0667rem" :src="item.imgUrl" /><div class="nick"><p>{{ item.username }}</p><div class="sex"><!-- sex 1为男,2为女 --><img v-if="item.sex === 1" src="@/assets/man.svg" alt="" /><img v-else src="@/assets/woman.svg" alt="" /></div></div><div class="like"><div class="like-good"><van-icon v-if="item.likeType === 1" name="good-job" color="red"@click="onChangeLike(item.id, 'good', true)" /><van-icon v-if="item.likeType !== 1" name="good-job-o"@click="onChangeLike(item.id, 'good', false)" /><span>{{ item.goodLike > 99 ? '99+' : item.goodLike }}</span></div><div class="like-bad"><van-icon style="transform: rotate(180deg)" v-if="item.likeType === 2" name="good-job"@click="onChangeLike(item.id, 'bad', true)" /><van-icon style="transform: rotate(180deg)" v-if="item.likeType !== 2" name="good-job-o"@click="onChangeLike(item.id, 'bad', false)" /><span>{{ item.badLike > 99 ? '99+' : item.badLike }}</span></div></div></div></transition-group></div></div></div>
</template><script>
import { Icon, Image, Toast } from 'vant'
import { reqLikeList, reqChangeLike } from '@/api/evaluate-like-list'
export default {components: {VanIcon: Icon,VanImage: Image},data() {return {type: 1, // 1 好队友,2 猪队友list: [] // 具体数据结构在 src/mock/startList.js mock数据中}},methods: {// 获取列表async getLikeList() {let id = this.$route.params.idlet type = this.typelet res = await reqLikeList(id, type)if (res.code === 200) {if (type === 1) {// 好队友this.list = res.data.sort((a, b) => b.goodLike - a.goodLike)} else {// 猪队友this.list = res.data.sort((a, b) => b.badLike - a.badLike)}}},// 切换类型onChangeType(type) {if (type === this.type) returnthis.type = typethis.getLikeList()},async onChangeLike(id, type, isChoose) {let res = await reqChangeLike(id, type, isChoose)if (res.code !== 200) {return Toast.fail('点赞失败')}let currentIndex = this.list.findIndex(item => item.id === id)let currentLikeCount;if (type === 'good') {if (this.list[currentIndex].likeType === 2) {this.list[currentIndex].badLike = this.list[currentIndex].badLike - 1}this.list[currentIndex].goodLike = isChoose ? this.list[currentIndex].goodLike - 1 : this.list[currentIndex].goodLike + 1this.list[currentIndex].likeType = isChoose ? 0 : 1currentLikeCount = this.list[currentIndex].goodLike;} else if (type === 'bad') {if (this.list[currentIndex].likeType === 1) {this.list[currentIndex].goodLike = this.list[currentIndex].goodLike - 1}this.list[currentIndex].badLike = isChoose ? this.list[currentIndex].badLike - 1 : this.list[currentIndex].badLike + 1this.list[currentIndex].likeType = isChoose ? 0 : 2currentLikeCount = this.list[currentIndex].badLike;}// 重新排序(点赞数一样,让新的总保持在最前面)if (this.type === 1) {this.list.sort((a, b) => {if (a.goodLike === b.goodLike && a.goodLike === currentLikeCount) {return a.id === id ? -1 : 1; // 将当前改变的项放到最前面}return b.goodLike - a.goodLike;});} else {this.list.sort((a, b) => {if (a.badLike === b.badLike && a.badLike === currentLikeCount) {return a.id === id ? -1 : 1; // 将当前改变的项放到最前面}return b.badLike - a.badLike;});}}},mounted() {this.getLikeList()}
}
</script><style lang="scss" scoped>
.container {width: 100%;height: calc(100vh - 1.28rem);overflow: auto;box-sizing: border-box;position: relative;background-color: #f7f7f7;border-top: 0.0133rem solid rgb(207, 207, 207);display: flex;flex-direction: column;.choose-type {width: 100%;display: flex;justify-content: flex-end;padding: 0.2rem 0.4rem;box-sizing: border-box;gap: 0.2667rem;background-color: #fff;margin-bottom: 0.2667rem;.good,.bad {display: flex;align-items: center;font-size: 0.4rem;}.active {color: #3d5eb3;}}.list {width: 100%;flex: 1;overflow: auto;.item {width: 100%;height: 1.6rem;background-color: #fff;margin-bottom: 0.2667rem;display: flex;align-items: center;padding: 0 0.2667rem;box-sizing: border-box;.nick {flex: 1;margin: 0 0.2667rem;font-size: 0.4rem;display: flex;align-items: center;p {max-width: 5.3333rem;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}.sex {margin-left: 0.1rem;img {width: 0.4rem;height: 0.4rem;margin-top: 0.1333rem;}}}.like {display: flex;align-items: center;gap: 0.2rem;.like-good,.like-bad {font-size: 0.4rem;display: flex;align-items: center;gap: 0.0667rem;}}}}
}/* 过渡效果 */
.list-move {transition: transform 0.5s;
}.list-enter-active,
.list-leave-active {transition: all 0.5s;
}.list-enter-from,
.list-leave-to {opacity: 0;transform: translateY(-30px);
}.list-leave-active {position: absolute;
}
</style>
相关文章:
vue列表滚动动画效果
一、效果展示: 录屏2024-12-07 02.16.59 二、步骤: 1. 需要用<transition-group>包裹需要渲染的item列表 ⚠️注意:这里的:key"item.id",必须要用id之类的,不能用index <transition-group name&qu…...
33.5 remote实战项目之设计prometheus数据源的结构
本节重点介绍 : 项目要求 通过remote read读取prometheus中的数据通过remote write向prometheus中写入数据 准备工作 新建项目 prome_remote_read_write设计prometheus 数据源的结构初始化 项目要求 通过remote read读取prometheus中的数据通过remote write向prometheus中写…...
Ceph文件存储
Ceph文件存储1.概念:数据以文件的形式存储在存储介质上,每个文件都有一个唯一的文件名并存储在一个目录结构中。提供方便的文件访问接口,支持多种文件操作,如创建、删除、读取、写入、复制等。用于存储和管理个人文件,如文档、图片…...
力扣-图论-5【算法学习day.55】
目录 前言 习题 1.移除可疑的方法 后言 前言 ###我做这类文章一个重要的目的还是给正在学习的大家提供方向和记录学习过程(例如想要掌握基础用法,该刷哪些题?)我的解析也不会做的非常详细,只会提供思路和一些关键…...
Linux-音频应用编程
ALPHA I.MX6U 开发板支持音频,板上搭载了音频编解码芯片 WM8960,支持播放以及录音功能!本章我们来学习 Linux 下的音频应用编程,音频应用编程相比于前面几个章节所介绍的内容、其难度有所上升,但是笔者仅向大家介绍 Li…...
SQL复杂查询功能介绍及示例
文章目录 1. 多表连接(JOIN)功能介绍应用场景示例查询及初始表格customers 表(未查询前)orders 表(未查询前)INNER JOIN 示例LEFT JOIN 示例 2. 子查询(Subquery)功能介绍应用场景示…...
Python使用Selenium自动实现表单填写之蛇年纪念币蛇钞预约(附源码,源码有注释解析,已测试可用
Python实现纪念币预约自动填写表单 声明:本文只做技术交流,不可用代码为商业用途,文末有源码下载,已测试可用。 Part 1 配置文件改写(源码 有详细的注释说明 读取配置文件,自己组数据库,录入信息 配置文件 Part 2 主函数 每一期的xpath路径都不一样 所以需要提前去网站…...
快速掌握HTML
目录 1. HTML文件的基本结构* 前端开发工具搭建* vscode的三个插件* 编写第一个html代码* 快速生成代码框架 *html特殊字符2. 双标签2.1 标题标签 h12.2 段落标签 p2.3 格式化标签2.4 超链接标签 a2.5 表格标签2.6 列表标签1. 无序列表:ul标签( 快捷键:u…...
Linux 音频驱动实验
音频是我们最常用到的功能,音频也是 linux 和安卓的重点应用场合。I.MX6ULL 带有 SAI接口,正点原子的 I.MX6ULL ALPHA 开发板通过此接口外接了一个 WM8960 音频 DAC 芯片,本章我们就来学习一下如何使能 WM8960 驱动,并且通过 WM89…...
【分布式】Redis分布式缓存
一、什么是Redis分布式缓存 Redis分布式缓存是指使用Redis作为缓存系统来存储和管理数据的分布式方案。在分布式系统中,多台服务器共同对外提供服务,为了提高系统的性能和可扩展性,通常会引入缓存来减轻数据库的压力。Redis作为一种高性能的…...
几个Linux系统安装体验: 一些系统对比和使用记录
本文对一些系统做对比,并记录一些使用过程。 背景 本文所记录的内容,不保证绝对性,也不代表任何方的意见、意思、看法、观点。如有不适,权当笑料。 个人使用记录 centos7 centos7为笔者的主力系统,生产工具。虚拟机…...
c++数据结构算法复习基础--11--高级排序算法-快速排序-归并排序-堆排序
高阶排序 1、快速排序 冒泡排序的升级算法 每次选择一个基准数,把小于基准数的放到基准数的左边,把大于基准数的放到基准数的右边,采用 “ 分治算法 ”处理剩余元素,直到整个序列变为有序序列。 最好和平均的复杂度:…...
特朗普画像
任务内容 Description 特朗普当选了,网上流传着很多段子,也出了特朗普的头像。有人说,特朗普 的头像像一团云。所以今年马云去了美国和特朗普谈中美企业的发展。那么你能帮 忙打印出特朗普的头像吗? 抽象派认为,特朗普…...
torch如何产生3d随机变形场(DVFs)
随机变形场(Deformation Vector Fields, DVFs)是一种在图像处理和计算机视觉中常用的技术,用于生成变形后的图像或增强数据集的多样性。它通过创建一个在空间中定义的位移场,以实现图像的随机变形。以下是生成随机DVFs的主要步骤和方法: 1. 随机噪声生成 随机变形场的基…...
【PlantUML系列】用例图(三)
目录 一、组成部分 二、典型案例 一、组成部分 参与者(Actors):使用关键字 actor 后跟参与者的名称。用例(Use Cases):使用关键字 usecase 后跟用例的名称和编号(可选)。系统边界…...
PHP使用RabbitMQ(正常连接与开启SSL验证后的连接)
代码中包含了PHP在一般情况下使用方法和RabbitMQ开启了SSL验证后的使用方法(我这边消费队列是使用接口请求的方式,每次只从中取出一条) 安装amqp扩展 PHP使用RabbitMQ前,需要安装amqp扩展,之前文章中介绍了Windows环…...
距离与AoA辅助的三维测距算法(适用于四个基站的情况的单点定位),MATLAB代码
本MATLAB 代码实现了一个基于LOS/NLOS混合环境的单点定位系统,主要用于估计目标物体的单点位 文章目录 代码运行结果源代码代码功能概述主要步骤分析初始化部分 绘图与输出 代码运行结果 定位结果如下: 命令行的坐标和误差输出: 部分代码…...
计算机网络原理之HTTP与HTTPS
一、前言 为了理解HTTP,我们有必要事先了解一下TCP/IP协议簇。 通常我们使用的网络(包括互联网)是在TCP/IP协议簇的基础上运作的。而HTTP属于它内部的一个子集。 计算机与网络设备要相互通信,双方必须基于相同的方法。比如&#…...
使用did包进行多期DID分析
本例中,样例数据来自 Callaway 和 Sant’Anna (2020),研究问题是各州提高最低工资对县级青少年就业率影响。 样例数据集包含 2003 年至 2007 年 500 个县级青少年就业率的数据,其中一些州在 2004 年首次接受治疗,也有一些在 2006…...
Windows宝塔面板下IIS环境如何部署SSL证书?
Windows宝塔面板下IIS环境如何部署SSL证书? 平时服务器linux宝塔用的较多,所以linux系统宝塔,如何部署SSL证书还是比较熟悉,今天遇到一个windows的部署SSL证书,还是头一次,所以记录一下,以防忘…...
【MySQL】函数
函数 1.日期函数2.字符串函数3.数学函数4.其他函数 点赞???收藏???关注??? 你的支持是对我最大的鼓励,我们一起努力吧??? 在mysql中其实内置了很多的函数操作,这些函数可以让我们在数据统计的时候以及查表的时候进行各自各样的操作。 1.日…...
面试复盘 part 02·1202-1207 日
作品集讲述部分 分析反思 作品集讲述部分,视觉讲述部分需要更换,需要换成其他视觉相关的修改 具体话术 这是一个信息展示优化方案,用户为财务,信息区分度不足,理解成本较高,因此选择需要降低理解成本。…...
RISC-V 汇编语言
安装RISCV工具链 riscv-gnu-toolchain工具链和模拟器安装记录 - 知乎 (zhihu.com) riscv-gnu-toolchain工具链分elf-gcc、linux-gnu-gcc两个版本,以及对应的32位和64位版本。两个版本的主要区别是: riscv32-unknown-elf-gcc、riscv64-unknown-elf-gcc…...
MySQL Explain 指南
MySQL Explain 指南 idselect_typetablepartitionstypepossible_keyskeykeylenrefrowsfilteredExtra 使用 explain 执行 DML 语句时,数据不会发生变化。explain 的结果可能包含多行数据,每行对应一个表。若涉及 union 操作,MySQL 会创建临时表…...
keil报错---connection refused due to device mismatch
解决办法如下: 记得改成1 把Enable取消...
ubuntu下的chattts 学习4:Advanced Usage
源码 import ChatTTS import torch import torchaudiochat ChatTTS.Chat() chat.load(compileFalse) # Set to True for better performance ################################### # Sample a speaker from Gaussian.rand_spk chat.sample_random_speaker() print(rand_spk)…...
Ubuntu桌面突然卡住,图形界面无反应
1.可能等待几分钟,系统会自动反应过来。你可以选择等待几分钟。 2.绝大多数情况系统是不会反应过来的,这时候可以进入tty终端直接注销用户。 (1)Ubuntu有6个tty终端,按住CtrlAltF1可以进入tty1终端,(同理CtrlAltF2&a…...
毕设记录_论文阅读(动磁式音圈电机的开发与应用)_20241207
前言 提醒: 文章内容为方便作者自己后日复习与查阅而进行的书写与发布,其中引用内容都会使用链接表明出处(如有侵权问题,请及时联系)。 其中内容多为一次书写,缺少检查与订正,如有问题或其他拓展…...
我有一个Python项目,已经用docker打包镜像也push了,k8s怎么部署呢?
要在Kubernetes (k8s) 部署你的Python项目,你需要创建一系列的Kubernetes资源定义文件(通常是以.yaml为扩展名),这些文件描述了你希望在集群中运行的应用程序。以下是部署的基本步骤: 1. **准备Docker镜像**࿱…...
GAN(生成对抗网络)原理与目标函数
GAN(生成对抗网络)原理与目标函数 什么是 GAN? GAN 是一种生成模型,全名是 生成对抗网络 (Generative Adversarial Network)。它由两个部分组成: 生成器 (Generator, G):负责生成“假数据”。判别器 (Di…...
[Java]项目入门
这篇简单介绍一些入门的有关项目和行业的知识,并带着实现一个小项目。便于已经编程入门的各位准备进阶到下一个阶段。 先大致地介绍,一个完整的项目(不看客户端、服务端的分类)基本可以划分为三部分: 1.前端。比如你现在看到的CSDN页面就是一…...
自定义指令,全局,局部,注册
让输入框自动获取焦点(每次刷新自动获取焦点) <template><div><h3>自定义指令</h3><input ref"inp" type"text"></div> </template><script> export default {mounted(){this.$refs.inp.focus…...
存储类内存,非易失性内存)的升级换代,将有利于促进【PCIe交换芯片】市场的发展
摘要 根据 HengCe(恒策咨询)的统计及预测,2023年全球PCIe交换芯片市场销售额达到了10.05亿美元,预计2030年将达到23.81亿美元,年复合增长率(CAGR)为12.5%(2024-2030)。地…...
泷羽sec-burp(7)
免责声明 学习视频来自 B 站up主泷羽sec,如涉及侵权马上删除文章。 笔记的只是方便各位师傅学习知识,以下代码、网站只涉及学习内容,其他的都与本人无关,切莫逾越法律红线,否则后果自负。 泷羽sec官网:http…...
OpenCV图像处理——二值化原理与代码实现(C++/Python)
概述 在 OpenCV 中,二值化(Binarization)是一种图像处理操作,它的目的是将一幅灰度图像转换为仅包含两种像素值(通常为 0 和 255,分别代表黑色和白色)的二值图像。通过设定一个合适的阈值&…...
Scala 高阶模式案例解析:从入门到实战
引言 Scala 作为一种功能强大的多范式编程语言,因其函数式编程特性而广受欢迎。其中,高阶模式(High-Order Patterns)是 Scala 函数式编程的核心概念之一,为开发者提供了解决复杂问题的优雅方式。本篇文章将全面解析 S…...
30天学会Go--第8天 GO语言 Gin Web框架学习与实践
30天学会Go–第8天 GO语言 Gin Web框架学习与实践 文章目录 30天学会Go--第8天 GO语言 Gin Web框架学习与实践前言一、Gin 的简介与安装1.1 Gin 的特点1.2 安装 Gin 二、Gin 的基础用法2.1 路由2.1.1 基本路由2.1.2 路由参数2.1.3 查询参数2.1.4 路由分组 2.2 中间件2.2.1 使用…...
用R(语言)学R-Learning R,In R
一、安装swirl包 在R语言控制面板,对话框输入以下命令: swirl 是一个非常有用的 R 包,它允许你通过交互式教程来学习 R 语言。以下是使用 swirl 包的基本步骤: 安装 swirl 包:首先,你需要在 R 中安装 swi…...
【银河麒麟操作系统运维】某平台多台虚拟机异常重启分析及处理
了解更多银河麒麟操作系统全新产品,请点击访问 麒麟软件产品专区:https://product.kylinos.cn 开发者专区:https://developer.kylinos.cn 文档中心:https://documentkylinos.cn 现象描述 某虚拟化平台多台虚拟机于凌晨触发异常…...
线性代数中的谱分解
一、谱分解的基本原理 谱分解(Spectral Decomposition)是线性代数中的一个重要概念,特别是在研究矩阵的特征值和特征向量时。它指的是将一个矩阵分解为其特征值和特征向量的组合,从而简化矩阵的运算和分析。谱分解通常适用于对称…...
synchronized(juc)
目录 线程一:interrupt设计模式两阶段终止模式interrupt打断park线程 二:守护线程三:线程状态五个状态(从操作系统角度来说)六种状态(从java API的角度) 共享模型之管程一:上下文切换的安全问题临界区和竟态条件 二:synchronized解决安全问题…...
HTML Input 文件上传功能全解析:从基础到优化
🤍 前端开发工程师、技术日更博主、已过CET6 🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 🍚 蓝桥云课签约作者、上架课程《Vue.js 和 E…...
深入理解Spring事务
目录 什么是Spring事务为什么需要Spring事务Spring事务的实现 Spring事务的传播机制Spring事务的底层原理 EnableTransactionManagement --开启Spring管理事务Import(TransactionManagementConfigurationSelector.class) --提供两个beanAutoProxyRegistrar --启用AOP的功能&am…...
React学习笔记2-初识React
这篇七个点:1 环境搭建, 2 JSX, 3 组件,4 数据流,5 生命周期,6 React与DOM,7 实例 1 环境搭建 1.1 引用React CDN <!DOCTYPE html> <html lang"en"> <head><met…...
【5G】Spectrum 频谱
频谱是移动运营商的关键资产,可用的频谱是定义移动网络容量和覆盖范围的重要因素。本章讨论了5G的不同频谱选项、它们的特性以及5G早期部署阶段的预期频谱。5G是首个旨在利用大约400 MHz到90 GHz之间所有频段的移动无线系统。5G还设计用于在许可、共享和非许可频谱带…...
解决流网络中不存在s~u~t路径的节点的最大流问题
解决流网络中不存在s~u~t路径的节点的最大流问题 问题分析伪代码C代码示例解释在流网络问题中,我们通常会假设对于所有的节点v ∈ V,都存在一条从源点s到汇点t经过v的路径。然而,当这一假设不成立时,即存在某些节点u,使得不存在路径sut,我们需要证明在这种情况下,网络中…...
springboot的 nacos 配置获取不到导致启动失败及日志不输出问题
前言 问题 1. 本地启动应用时,一切正常,但是部署 docker 后,会因为获取不到 nacos 中的配置导致服务启动失败。 2.当 docker 中的服务一直重启,可能会突然某一次启动成功,之后只要不重新构建 docker 镜像&am…...
word poi-tl 图表功能增强,插入图表折线图、柱状图、饼状图
目录 问题解决问题poi-tl介绍 功能实现引入依赖功能介绍 功能实例饼图模版代码效果图 雷达图(模版同饼图)代码效果图 柱状图(模版同饼图)代码效果图 附加CustomCharts 工具类CustomChartSingleSeriesRenderData 数据对象CustomCha…...
SpringBoot 项目如何集成 JWT
SpringBoot 项目如何集成 JWT JWT JSON Web Token (JWT) 是一个开放标准(RFC 7519),它定义了一种紧凑的、自包含的方式,用于作为 JSON 对象在各方之间安全地传输信息。 在 Oauth2 中,其实就是返回访问令牌 (access_token&#…...
如何查看电脑刷新率
Windows 系统 通过显示设置查看: 右键点击桌面空白处,选择 “显示设置”。在打开的窗口中,找到 “高级显示设置”。点击 “显示适配器属性”。在弹出的窗口中,选择 “监视器” 选项卡,即可看到当前的屏幕刷新率。使用 …...