uni-app中image标记点需基于实际渲染尺寸动态计算坐标：用view包裹image并监听@load，通过createselectorquery获取真实宽高，按比例转换原始坐标；每个hotspot需独立状态字段并用:key绑定唯一id；swiper切换时须清空旧坐标并重新计算；动效优先用transform+transition。
uni-app 中 image 上怎么加可点击的标记点（hotspot）
不能直接在 <image></image> 上叠加 <view></view> 并指望它精准响应点击——因为 image 的缩放、裁剪（mode）、宽高比会彻底打乱绝对定位坐标系。真实场景中，用户点击的是“视觉上看到的图中某个位置”，不是原始像素坐标。
核心解法是：把图片渲染区域和标记点容器做统一坐标映射。常见错误是直接用 position: absolute 写死 left/top，结果图片一换尺寸或 mode 一改（比如从 aspectFill 切到 scaleToFill），点就偏了。
- 先用
<view class="image-wrapper"></view>包住<image></image>，设为relative定位容器 - 标记点用
<view class="hotspot"></view>放在 wrapper 内部，用absolute定位，但 left/top 值必须动态计算 - 关键：监听
image加载完成（@load），通过uni.createSelectorQuery()获取image实际渲染宽高与 wrapper 容器宽高，算出缩放比例和偏移量 - 后端返回的标记点坐标如果是原始图的 x/y（如 {x: 240, y: 180}，原图 800×600），需按比例转换成屏幕坐标
标记点状态同步为什么总错乱
用 v-for 渲染一堆 hotspot，点一个全变色，这是典型的状态没绑定到具体项。Vue 的响应式不会自动识别“第 3 个点被点了”，除非你明确告诉它哪个点的状态变了。
不要写 :class="{ active: isHotspotActive }" 这种全局变量；要给每个点配独立状态字段，比如数据结构里带 isMarked: false，点击时只改对应索引项的 isMarked。
- 后端返回的标记点数组建议带唯一
id字段，前端用v-for="(point, index) in hotspotList"+:key="point.id" - 点击事件传
index或point.id，然后this.hotspotList[index].isMarked = !this.hotspotList[index].isMarked - 如果需要持久化（比如刷新后仍保持已标记），得在点击后立刻调用 API 更新服务端状态，不能只改本地数组
swiper-item 里的图片标记点怎么随滑动重算坐标
swiper 每次切换，image 会重新加载或复用，但旧的标记点 DOM 可能还挂着错误坐标。不手动清理或重算，点位就会漂移甚至叠在一起。
必须在 @change 回调里触发重绘逻辑：先清空所有 hotspot 的 left/top 行内样式，再对当前页的 image 重新查尺寸、重算坐标、设置新样式。
- 别依赖
current值去“预设”坐标，要等当前swiper-item内的image触发@load后再算 - 可以用
ref绑定当前页的 image 元素，避免 query 失败 - 性能注意：频繁 resize 或滑动过快时，加个防抖（
setTimeout+clearTimeout），只处理最后一次稳定状态
小红书风格的标记点动效怎么做才不卡
用 transform: scale() 配合 transition 是最稳妥的，别用 width/height 或 opacity 动画——在低端安卓机上容易掉帧。
图标建议用字体图标（如 <text class="icon-heart"></text>）或 <canvas></canvas> 绘制，避免多个 <image></image> 标签同时动画引发内存压力。
- CSS 示例：
.hotspot.active { transform: scale(1.3); }，transition 写在基础类里：transition: transform 0.2s ease-in-out; - 如果标记点要带数字角标（如“已标记 3 人”），角标文本用
font-size: 24rpx，别用 px，否则在不同设备上大小不一致 - 真机调试时重点看 Android 旧机型（如 Redmi Note 8），这些设备对
will-change: transform敏感，加了反而更卡
