You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Quasar Carousel缩略图滚动条点击导航箭头时不更新问题

问题现象
  • 使用导航箭头或previous()、next()方法切换图片时,若当前缩略图处于屏幕可视范围内,会显示粗边框标识。
  • 当缩略图数量超出可视区域时,容器会出现滚动条供查看隐藏的缩略图。
  • 但通过导航箭头或previous()、next()方法切换到可视区域外的缩略图时,该缩略图不会自动滚动到可视范围内,滚动条的滑块位置也不会同步更新。
  • 典型场景:当滚动条位于最左侧时,选中当前可视区域最右侧的缩略图,点击右侧导航箭头或调用next()方法切换到下一张图片,目标缩略图不会滚动显示出来,滚动条滑块也没有相应的位置变化。

环境信息

操作系统 - Windows_NT(10.0.19045) - win32/x64
NodeJs - 20.10.0

全局包
  NPM - 10.2.3
  yarn - 未安装
  @quasar/cli - 2.3.0
  @quasar/icongenie - 未安装
  cordova - 您已选择退出遥测。如需更改,请运行:cordova telemetry on。
11.0.0

重要本地包
  quasar - 2.14.3 -- 快速构建高性能VueJS用户界面(SPA、PWA、SSR、移动端和桌面端)
  @quasar/app-vite - 1.7.3 -- 基于Vite的Quasar框架App CLI
  @quasar/extras - 1.16.9 -- Quasar框架字体、图标和动画
  eslint-plugin-quasar - 未安装
  vue - 3.5.12 -- 用于构建现代Web UI的渐进式JavaScript框架
  vue-router - 4.2.5
  pinia - 2.2.6 -- 直观、类型安全且灵活的Vue状态管理库
  vuex - 未安装
  vite - 2.9.17 -- 基于原生ESM的Web开发构建工具
  eslint - 8.56.0 -- 基于AST的JavaScript模式检查器
  electron - 未安装
  electron-packager - 未安装
  electron-builder - 未安装
  register-service-worker - 1.7.2 -- 用于注册Service Worker的脚本,包含钩子
  @capacitor/core - 5.7.8 -- Capacitor:使用JavaScript和Web技术开发跨平台应用
  @capacitor/cli - 5.7.8 -- Capacitor:使用JavaScript和Web技术开发跨平台应用
  @capacitor/android - 5.7.8 -- Capacitor:使用JavaScript和Web技术开发跨平台应用
  @capacitor/ios - 5.7.8 -- Capacitor:使用JavaScript和Web技术开发跨平台应用

内容的提问来源于stack exchange,提问作者Polymath

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.15 23:23:13