Swiper重构 #1711
Open
Swiper重构 #1711
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
added 20 commits
November 6, 2024 19:09
hiyuki
reviewed
Nov 21, 2024
| let renderChild = children.slice() | ||
| if (props.circular && totalElements.value > 1) { | ||
| if (totalElements.value === 2) { | ||
| renderChild = renderChild.concat(children).concat(children) |
hiyuki
reviewed
Nov 21, 2024
| renderChild = renderChild.concat(children).concat(children) | ||
| } else { | ||
| // 最前加两个 | ||
| renderChild.unshift(children[totalElements.value - 1]) |
hiyuki
reviewed
Nov 21, 2024
| ], { layoutRef: layoutRef }) | ||
|
|
||
| function onWrapperLayout (e: LayoutChangeEvent) { | ||
| nodeRef.current?.measure((x: number, y: number, width: number, height: number, offsetLeft: number, offsetTop: number) => { |
There was a problem hiding this comment.
layout里面可以直接获取高宽，不需要measure
hiyuki
reviewed
Nov 21, 2024
|
|
||
| function onWrapperLayout (e: LayoutChangeEvent) { | ||
| nodeRef.current?.measure((x: number, y: number, width: number, height: number, offsetLeft: number, offsetTop: number) => { | ||
| layoutRef.current = { x, y, width, height, offsetLeft, offsetTop } |
hiyuki
reviewed
Nov 21, 2024
| } | ||
| const attr = dir.value === 'x' ? 'width' : 'height' | ||
| changeState[attr] = changeState[attr] - previousMargin - nextMargin | ||
| if (dir.value === 'x') { |
hiyuki
reviewed
Nov 21, 2024
| if (totalElements.value <= 1) return null | ||
| const dots: Array<ReactNode> = [] | ||
| for (let i = 0; i < totalElements.value; i++) { | ||
| const dotStyle = useAnimatedStyle(() => { |
There was a problem hiding this comment.
不应该在for中使用hooks，假如elements数量更新了就炸了
hiyuki
reviewed
Nov 21, 2024
| } | ||
|
|
||
| function handlerInterval (loopv: boolean, oldLoop: boolean | null) { | ||
| clearInterval(intervalId.current) |
hiyuki
reviewed
Nov 21, 2024
| intervalId.current = setInterval(() => { | ||
| // canLoop变化比较快的情况下 | ||
| if (canLoop.value) { | ||
| createAutoPlay() |
There was a problem hiding this comment.
这个东西为啥要声明为worklet？看上去是个纯js函数
hiyuki
reviewed
Nov 21, 2024
| if (!isInit && props.bindchange) { | ||
| runOnJS(handleSwiperChange)(newIndex) | ||
| } | ||
| }, [targetIndex.value]) |
hiyuki
reviewed
Nov 21, 2024
| } | ||
| }, [targetIndex.value]) | ||
|
|
||
| useAnimatedReaction(() => canLoop.value, (loopv, oldLoop) => { |
hiyuki
reviewed
Nov 21, 2024
| const targetIndex = useSharedValue(0) | ||
| const initOffset = getInitOffset() | ||
| const offset = useSharedValue(initOffset) | ||
| const start = useSharedValue(initOffset) |
hiyuki
reviewed
Nov 21, 2024
| props.current && (targetIndex.value = props.current) | ||
| } | ||
| } | ||
| }, [props.autoplay, props.current, widthState, heightState]) |
hiyuki
reviewed
Nov 21, 2024
| }) | ||
| .onUpdate((e) => { | ||
| 'worklet' | ||
| cancelAnimation(offset) |
hiyuki
reviewed
Nov 21, 2024
| } | ||
|
|
||
| function createAutoPlay () { | ||
| 'worklet' |
hiyuki
reviewed
Nov 21, 2024
|
|
||
| const totalElements = useSharedValue(children.length) | ||
| const targetIndex = useSharedValue(0) | ||
| const initOffset = getInitOffset() |
hiyuki
reviewed
Nov 26, 2024
| } | ||
| } | ||
|
|
||
| function stopLoop () { |
hiyuki
reviewed
Nov 26, 2024
| if (!props.circular) { | ||
| // 获取下一个位置的坐标, 循环到最后一个元素,直接停止, 取消定时器 | ||
| if (targetIndex.value === totalElements.value - 1) { | ||
| runOnJS(stopLoop)() |
hiyuki
reviewed
Nov 26, 2024
| // 记录选中元素的索引值 | ||
| const targetIndex = useSharedValue(props.current || 0) | ||
| // 记录元素的偏移量 | ||
| const offset = useSharedValue({ x: 0, y: 0 }) |
There was a problem hiding this comment.
最好xy都还是用一个值，因为不存在xy同时都在动的场景
hiyuki
reviewed
Nov 26, 2024
| if (totalElements.value !== children.length) { | ||
| totalElements.value = children.length | ||
| } | ||
| }, [props.children]) |
There was a problem hiding this comment.
这个在render函数里直接更新就行，不需要useEffect
hiyuki
reviewed
Nov 26, 2024
| easing: easeMap[easeingFunc] | ||
| }, () => { | ||
| offset.value = targetOffset | ||
| isAutoFirst.current = false |
hiyuki
reviewed
Nov 26, 2024
| offset.value = targetOffset | ||
| props.autoplay && loop() | ||
| } | ||
| }, [props.current, widthState, heightState]) |
There was a problem hiding this comment.
需要考虑autoplay由false变为true的情况，以及autoplay和current需要分开处理，以及需要用到的props可以前面解构一次，如果有默认值也可以直接赋值。
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
No description provided.