点位指示器应使用带data-index和aria-current的button组嵌套在flex容器中，禁用outline和过渡动画，响应式控制显隐，并确保touch-action不拦截点击。
点位指示器的HTML结构怎么搭才不踩坑
点位指示器本质是几个可交互的<button></button>或<span></span>，但必须和轮播图的当前页严格绑定。常见错误是把指示器写死成静态列表，没和currentSlideIndex联动，导致点击跳转后点位不亮、或滑动后点位不同步。
推荐结构用<div class="carousel-indicators">包裹一组<code><button type="button"></button>，每个button加data-index属性对应图片序号：
<div class="carousel-indicators"> <button type="button" data-index="0" aria-current="true"></button> <button type="button" data-index="1"></button> <button type="button" data-index="2"></button> </div>
- 必须设
type="button"，避免表单默认提交行为 -
aria-current="true"供读屏器识别当前项，移动端无障碍关键 - 不要用
<ol></ol>或<ul></ul>——语义不符，且默认样式难重置，尤其在iOS Safari里缩放异常
CSS控制点位样式：用flex+gap比float更稳
移动端点位常横排居中在轮播图底部，用display: flex + justify-content: center最可靠。老方案用float或inline-block在Android低版本里易错位，且gap对间距控制更直观。
.carousel-indicators {
display: flex;
justify-content: center;
gap: 8px;
margin-top: 12px;
}
.carousel-indicators button {
width: 10px;
height: 10px;
border-radius: 50%;
border: 0;
background: #ccc;
padding: 0;
cursor: pointer;
}
.carousel-indicators button[aria-current="true"] {
background: #007aff;
}
-
gap兼容性已足够好（Chrome 84+/Safari 14.1+/Firefox 63+），比手动算margin安全 - 禁用
outline和border，否则iOS Safari点击时会出蓝框；用appearance: none进一步重置 - 尺寸别用
em或rem——字体缩放时点位会变形，固定px或vw更可控
响应式断点下点位要不要隐藏？看真实场景
不是所有移动端都要显示点位。比如横屏iPad或折叠屏展开态，轮播图宽度超400px时，点位反而干扰内容流。直接用@media隐藏比JS判断更轻量。
- 小屏（
max-width: 480px）：始终显示，用户手指操作需要明确反馈 - 中屏（
481px ）：可保留，但把<code>gap调大到12px防误触 - 大屏（
min-width: 769px）：建议display: none，改用左右箭头或自动播放更合适
注意：别用visibility: hidden——它仍占布局空间，点位容器高度还在，可能撑开轮播图底部留白。
触摸设备上点击反馈失效？补上:active伪类
iOS和Android Chrome里，button默认没有点击压感，用户会怀疑没点中。仅靠:hover没用——触摸设备无悬停状态。
.carousel-indicators button:active {
transform: scale(0.85);
opacity: 0.7;
}
- 必须同时加
transform和opacity，单用一个在某些安卓机型上无效 - 别用
transition: all——会导致非点击场景下也触发动画，比如页面滚动时点位闪烁 - 如果轮播图用了
touch-action: pan-x（防滑动冲突），确保指示器父容器没继承该属性，否则按钮点击事件会被拦截
点位指示器看着简单，真正卡住人的往往是aria-current同步时机、touch-action穿透、以及不同安卓WebView对gap的解析差异——这些细节不测真机很难发现。
