Feat swiper display multi and changestart - #2559
Conversation
Blackgan3
commented
Jul 29, 2026
- 输出RN swiper 组件支持 diplay-multi-items 属性
- 输出RN swiper 组件单独支持 change-start 事件
# Conflicts: # .agents/skills/mpx2rn/references/rn-template-reference.md # docs-vitepress/guide/rn/component.md
| useEffect(() => { | ||
| childrenLength.value = children.length | ||
| if (children.length - 1 < currentIndex.value) { | ||
| const maxIndex = circular ? children.length - 1 : Math.max(0, children.length - displayMultipleItems) |
There was a problem hiding this comment.
[P1] 这里定义了非循环模式的合法上限,但外部 current 更新仍在下方直接传给 updateCurrent,没有使用这个上限。比如 5 项、展示 3 项时 maxIndex=2,动态设置 current=4 会得到 offset=-4*step,视口滑出内容区并出现空白。建议把索引归一化提成统一逻辑,供手势、autoplay 和外部 current 共用。
|
|
||
| useEffect(() => { | ||
| if (circular !== circularShared.value) { | ||
| if (circular !== circularShared.value || patchElmNum !== patchElmNumShared.value || displayMultipleItems !== displayMultipleItemsShared.value) { |
There was a problem hiding this comment.
[P2] 动态修改 display-multiple-items 时,这个 effect 只更新 shared value 和 offset,没有重算 step。容器尺寸不变时 onLayout 不会保证再次触发,例如宽 300 从展示 1 项改为 2 项后,item 仍可能保持 300 宽,但手势边界已按 2 项计算。这里需要同步重算 step,并重新校正 current/offset。
| const realWidth = dir === 'x' ? width - preMargin - nextMargin : width | ||
| const realHeight = dir === 'y' ? height - preMargin - nextMargin : height | ||
| const iStep = dir === 'x' ? realWidth : realHeight | ||
| const iStep = (dir === 'x' ? realWidth : realHeight) / displayMultipleItems |
There was a problem hiding this comment.
[P2] 这里引入 / displayMultipleItems 后,下方 margin 更新 effect 仍使用 newStep = step.value - patchStep,增量公式已经不成立。例如宽 300、展示 2 项、previous-margin 从 0 改为 20,正确 step 是 140,当前会算成 130。建议缓存主轴尺寸并统一按 (size - preMargin - nextMargin) / displayMultipleItems 重算。
| marginBottom: dotSpacing, | ||
| zIndex: 98 | ||
| } | ||
| const displayMultipleItems = Number(props['display-multiple-items']) || 1 |
There was a problem hiding this comment.
[P2] 建议在这里把值归一化为有限正整数。当前负数、小数和 Infinity 都会保留;尤其 circular 且 children>1 时,Infinity 会成为 patchElmNum,后续 clone 的 for (i < patchElmNum) 无法结束,直接卡死 JS 线程。