当前位置: 首页 > news >正文

el-carousel在新增或者删除el-carousel-item时默认跳到第一页的原因和解决

现象

使用走马灯效果时
当el-carousel-item增加或者减少时,页会跳到第一页
体验很不友好。

原因

当新增或这删除el-carousel-item时,会触发setActiveIndex(props.initialindex),
setActiveIndex的行为是小于0或者大于最大页会有一个clamp的效果再进行跳转,如果是当前页则不跳转
默认的initialindex是0所以就会跳到第一页

解决方案

先默认initialindex为0;
一般新增时我们希望设置为最新的那一页,此时先设置initialindex为当前页,
然后再手动调用setActiveIndex跳到最新添加的那一页。
不过需要先等最新的那一页完成渲染再跳转,否则在动画过渡时出现混乱。
此时可以使用vue自带的nexttick,将手动跳转放到下一帧执行。

http://www.xdnf.cn/news/1374103.html

相关文章:

  • betaflight configurator 如何正确烧写飞控
  • 基于muduo库的图床云共享存储项目(二)
  • Linux 云服务器内存不足如何优化
  • 【RAG】使用llamaindex进行RAG开发
  • 6 种无需 iTunes 将照片从 iPhone 传输到电脑
  • TDengine IPv6 支持用户手册
  • “java简单吗?”Java的“简单”与PHP的挑战:编程语言哲学-优雅草卓伊凡
  • KDMS V4 重磅升级,智能迁移赋能国产化替代!
  • android证书相关
  • 像WPS Office 一样处理pdf页面尺寸
  • AI 解决生活小事 2——用 AI 做一回新闻播客
  • 使用人工智能写一个websocket聊天页面
  • PDF补丁丁:开源多年,完全免费的多功能 PDF 工具箱
  • Agno Agent​​
  • 如何借助文档控件 TX Text Control 轻松优化 PDF 文件大小?
  • 计算机视觉(三):opencv环境搭建和图片显示
  • 主键索引和普通索引的区别
  • 基于 Qt 实现的动态流程图画板框架设计与实现
  • 在Windows系统上升级Node.js和npm
  • FastAPI + SQLModel 从 0 搭到完整 CRUD
  • STL库——vector(类模拟实现)
  • skywalking 原理
  • 当AI有了温度,三星正在重新定义生活的边界
  • 技术分析 | Parasoft C/C++test如何突破单元测试的隔离难题
  • SyntaxError: Failed to execute ‘open‘ on ‘XMLHttpRequest‘: Invalid URL
  • 【C++】set 容器的使用
  • Android/Java中枚举的详解
  • 基于Spring Boot+Vue的生活用品购物平台/在线购物系统/生活用户在线销售系统/基于javaweb的在线商城系统
  • JMeter —— 压力测试
  • 基于 Docker Compose 的若依多服务一键部署java项目实践