uni.previewimage 的 current 参数必须传图片 url 而非索引，传数字无效；swiper 的 @change 需显式初始化 current 并手动同步，避免循环触发；h5 下 previewimage 仅为页面跳转，无缩放手势，需分端实现；预览关闭后轮播图索引丢失需主动保存状态。

uni.previewImage 的 current 参数必须传 URL，不是索引

直接调用 uni.previewImage 时，如果想让预览从点击的那张图开始，current 字段必须填当前图片的完整 URL 字符串，不是轮播图的下标数字。传 current: 2 是无效的，会默认从第一张开始。

常见错误是：在 swiper-item 的 @click 里只拿到 i（索引），然后直接传给 current。正确做法是先从图片数组取值：

• 确保图片数组已定义，比如 this.goodsInfo.pics 或 goods.mainPictures
• 点击事件中用 urls[i] 得到当前 src，再传给 current
• urls 数组不能含空字符串、null 或 404 地址，否则预览卡在 loading 态

轮播图 bindchange 不触发或索引错乱怎么办

swiper 的 @change 回调不触发，或 event.detail.current 比实际少 1，大概率是没显式设置 current 属性初始值。它不认默认值，也不认 v-model:current（Vue 3 下需用 :current.sync 或手动同步）。

uni-app

uni-app 是基于 Vue 的跨端开发框架，适合开发 H5、App、小程序、鸿蒙和多端业务应用。

下载

• 务必在 data / setup 中初始化 current: 0，并在模板里写成 :current="current"
• 避免在 @change 里直接赋值 this.current = ...，容易引发循环触发；如需控制跳转，用 nextTick 延后
• iOS 真机上 @change 可能比视觉反馈慢一帧，别依赖它做实时高亮或状态联动

H5 平台 previewImage 行为和 App 完全不同

uni.previewImage 在 H5 实际走的是浏览器 src 跳转，没有动画、不支持缩放、也不能双指手势——它只是个页面跳转。App 平台才调用原生预览，但你无法往里面塞自定义 UI、按钮或加载逻辑。

• 想统一支持双击放大、拖拽、滑动切换，就必须放弃 uni.previewImage，自己封装 <swiper> + <movable-view></movable-view></swiper> 或第三方手势库
• 若只求基础预览，H5 和 App 分开处理：App 用 uni.previewImage，H5 改用轻量 modal + <img> + CSS transform 缩放
• 注意 H5 下所有图片 URL 必须是 HTTPS，HTTP 会被拦截导致白屏

预览关闭后轮播图“掉帧”，其实是状态没保存

用户滑动轮播图几页后再点预览，回来发现轮播图回到了初始位置——这不是 bug，是你没在滑动过程中记录状态。预览组件关闭后，页面本身不会自动还原轮播索引。

• 在 @change 回调里把 event.detail.current 存进响应式变量（如 ref 或 data 字段）
• 预览调用前记一次，关闭后不需要额外操作；但若预览期间用户做了其他交互（比如切 Tab），就得靠本地缓存或全局状态管理来恢复
• 不要在预览打开时重置 current，否则会覆盖用户刚滑动的位置

真正要“自定义风格”，核心矛盾就在这里：原生 uni.previewImage 不可定制，而手写预览层又得兼容多端手势和性能。多数项目卡在这一步，不是代码写不出来，而是没想清楚到底要牺牲哪块——是放弃 H5 缩放，还是多花两天手写一套 vue-touch + transform 方案。