Swiper重构 #1711

xiao19880917lu · 2024-11-21T06:08:31Z

No description provided.

hiyuki · 2024-11-21T08:22:42Z

packages/webpack-plugin/lib/runtime/components/react/mpx-swiper.tsx

+    let renderChild = children.slice()
+    if (props.circular && totalElements.value > 1) {
+      if (totalElements.value === 2) {
+        renderChild = renderChild.concat(children).concat(children)


添加节点需要cloneElement

hiyuki · 2024-11-21T08:22:56Z

packages/webpack-plugin/lib/runtime/components/react/mpx-swiper.tsx

+        renderChild = renderChild.concat(children).concat(children)
+      } else {
+        // 最前加两个
+        renderChild.unshift(children[totalElements.value - 1])


前面不需要加元素

hiyuki · 2024-11-21T08:24:27Z

packages/webpack-plugin/lib/runtime/components/react/mpx-swiper.tsx

+  ], { layoutRef: layoutRef })
+
+  function onWrapperLayout (e: LayoutChangeEvent) {
+    nodeRef.current?.measure((x: number, y: number, width: number, height: number, offsetLeft: number, offsetTop: number) => {


layout里面可以直接获取高宽，不需要measure

hiyuki · 2024-11-21T08:24:35Z

packages/webpack-plugin/lib/runtime/components/react/mpx-swiper.tsx

+
+  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 · 2024-11-21T08:29:49Z

packages/webpack-plugin/lib/runtime/components/react/mpx-swiper.tsx

+        }
+        const attr = dir.value === 'x' ? 'width' : 'height'
+        changeState[attr] = changeState[attr] - previousMargin - nextMargin
+        if (dir.value === 'x') {


这里不应该都去设置么

hiyuki · 2024-11-21T08:31:38Z

packages/webpack-plugin/lib/runtime/components/react/mpx-swiper.tsx

+    if (totalElements.value <= 1) return null
+    const dots: Array<ReactNode> = []
+    for (let i = 0; i < totalElements.value; i++) {
+      const dotStyle = useAnimatedStyle(() => {


不应该在for中使用hooks，假如elements数量更新了就炸了

hiyuki · 2024-11-21T08:40:05Z

packages/webpack-plugin/lib/runtime/components/react/mpx-swiper.tsx

+  }
+
+  function handlerInterval (loopv: boolean, oldLoop: boolean | null) {
+    clearInterval(intervalId.current)


为啥有一个timeout有一个interval?

hiyuki · 2024-11-21T08:41:07Z

packages/webpack-plugin/lib/runtime/components/react/mpx-swiper.tsx

+          intervalId.current = setInterval(() => {
+            // canLoop变化比较快的情况下
+            if (canLoop.value) {
+              createAutoPlay()


这个东西为啥要声明为worklet？看上去是个纯js函数

hiyuki · 2024-11-21T08:42:22Z

packages/webpack-plugin/lib/runtime/components/react/mpx-swiper.tsx

+    if (!isInit && props.bindchange) {
+      runOnJS(handleSwiperChange)(newIndex)
+    }
+  }, [targetIndex.value])


这里不需要写deps把

hiyuki · 2024-11-21T08:43:18Z

packages/webpack-plugin/lib/runtime/components/react/mpx-swiper.tsx

+    }
+  }, [targetIndex.value])
+
+  useAnimatedReaction(() => canLoop.value, (loopv, oldLoop) => {


canLoop是干啥的

hiyuki · 2024-12-19T09:28:30Z

packages/webpack-plugin/lib/runtime/components/react/mpx-swiper.tsx

+  const initHeight = typeof defaultHeight === 'number' ? defaultHeight - previousMargin - nextMargin : defaultHeight
+  const [widthState, setWidthState] = useState(initWidth)
+  const [heightState, setHeightState] = useState(initHeight)
+  const dir = useSharedValue(horizontal === false ? 'y' : 'x')


没有更新的时机

hiyuki · 2024-12-19T09:35:49Z

packages/webpack-plugin/lib/runtime/components/react/mpx-swiper.tsx

+  const touchfinish = useSharedValue(false)
+  // 用户是否触发了move事件,起点在onStart, 触发move事件才会执行onEnd, 1. 移动一定会触发onStart, onTouchesMove, onEnd 2. 点击未进行操作, 会触发onTouchsUp
+  const isTriggerStart = useSharedValue(false)
+  // 记录用户点击时绝对定位坐标


注释有问题，应该是上一次的坐标

hiyuki · 2024-12-19T09:44:14Z

packages/webpack-plugin/lib/runtime/components/react/mpx-swiper.tsx

+
+  function getStepValue () {
+    'worklet'
+    return dir.value === 'x' ? widthState : heightState


worklet里应该拿不到更新的js值，这两个东西应该作为sharedValue

hiyuki · 2024-12-19T09:45:00Z

packages/webpack-plugin/lib/runtime/components/react/mpx-swiper.tsx

+      pauseLoop()
+    }
+    return () => { pauseLoop() }
+  }, [props.autoplay, widthState, heightState])


这里和上面的useEffect不应该依赖widthState和heightState

hiyuki · 2024-12-19T09:47:42Z

packages/webpack-plugin/lib/runtime/components/react/mpx-swiper.tsx

+  const step = useSharedValue(initStep)
+  const totalElements = useSharedValue(children.length)
+  // 记录选中元素的索引值
+  const targetIndex = useSharedValue(0)


currentIndex?

hiyuki · 2024-12-19T09:49:37Z

packages/webpack-plugin/lib/runtime/components/react/mpx-swiper.tsx

+
+  useEffect(() => {
+    // 这里stepValue 有时候拿不到
+    const stepValue = getStepValue()


stepValue直接作为一个sharedValue

在onLayout中直接更新

hiyuki · 2024-12-19T09:56:46Z

packages/webpack-plugin/lib/runtime/components/react/mpx-swiper.tsx

+    const dotStep = dotCommonStyle.width + dotCommonStyle.marginRight + dotCommonStyle.marginLeft
+    return {
+      transform: [{
+        translateX: targetIndex.value * dotStep


得考虑纵向

hiyuki · 2024-12-19T10:01:28Z

packages/webpack-plugin/lib/runtime/components/react/mpx-swiper.tsx

+          extraStyle
+        ]}
+        key={ 'page' + index}>
+        <SwiperContext.Provider value={contextValue}>


顶层包一个就行了

hiyuki · 2024-12-19T10:01:53Z

packages/webpack-plugin/lib/runtime/components/react/mpx-swiper.tsx

+        offset,
+        stepValue: typeof stepValue === 'number' ? stepValue : 0
+      }
+      return (<Animated.View


不做动画不需要animated.view

hiyuki · 2024-12-19T10:03:11Z

packages/webpack-plugin/lib/runtime/components/react/mpx-swiper.tsx

+  }
+
+  function renderItems () {
+    const pageStyle = { width: widthState, height: heightState }


确定这块的必要性是啥

hiyuki · 2024-12-23T05:44:23Z

packages/webpack-plugin/lib/runtime/components/react/mpx-swiper.tsx

+  const touchfinish = useSharedValue(false)
+  // 用户是否触发了move事件,起点在onStart, 触发move事件才会执行onEnd, 1. 移动一定会触发onStart, onTouchesMove, onEnd 2. 点击未进行操作, 会触发onTouchsUp
+  const isTriggerStart = useSharedValue(false)
+  // 记录上一次的点击时的绝对定位坐标


这个不是点击，是上一帧

hiyuki · 2024-12-23T05:45:33Z

packages/webpack-plugin/lib/runtime/components/react/mpx-swiper.tsx

+  useNodesRef<View, SwiperProps>(props, ref, nodeRef, {})
+
+  // 默认取水平方向的width
+  const { width } = Dimensions.get('window')


这个有啥意义

hiyuki · 2024-12-23T05:50:34Z

packages/webpack-plugin/lib/runtime/components/react/mpx-swiper.tsx

+      dots.push(<View style={[dotCommonStyle, { backgroundColor: unActionColor }]} key={i}></View>)
+    }
+    return (
+      <View pointerEvents="none" style = {[styles['pagination_' + dir.value]]}>


无意义的数组包裹

hiyuki · 2024-12-23T05:56:23Z

packages/webpack-plugin/lib/runtime/components/react/mpx-swiper.tsx

+        nextMargin && dir.value === 'y' && (extraStyle.marginBottom = nextMargin)
+      }
+      const newChild = React.cloneElement(child, { itemIndex: index, scale: props.scale })
+      return (<Animated.View style={[style.itemWrap, itemAnimatedStyles, extraStyle]} key={ 'page' + index}>{newChild}</Animated.View>)


把这个animatedStyle作为props传递到swiper-item中应用就可以了，没必要再包一层view

hiyuki · 2024-12-23T05:56:54Z

packages/webpack-plugin/lib/runtime/components/react/mpx-swiper.tsx

+
+  function renderItems () {
+    const itemAnimatedStyles = useAnimatedStyle(() => {
+      const pageStyle: Object = dir.value === 'x' ? { width: step.value, height: '100%' } : { width: '100%', height: step.value }


无意义的变量定义

hiyuki · 2024-12-23T10:37:11Z

packages/webpack-plugin/lib/runtime/components/react/mpx-swiper.tsx

+      }
+      const newChild = React.cloneElement(child, {
+        itemIndex: index,
+        scale: props.scale,


scale走context传递

hiyuki · 2024-12-23T10:38:34Z

packages/webpack-plugin/lib/runtime/components/react/mpx-swiper.tsx

+    }
+    const arrChilds = renderChild.map((child, index) => {
+      const extraStyle = {} as { [key: string]: any }
+      if (index === 0) {


circular判断

hiyuki · 2024-12-23T10:57:34Z

packages/webpack-plugin/lib/runtime/components/react/mpx-swiper.tsx

+        duration: easeDuration,
+        easing: easeMap[easeingFunc]
+      }, () => {
+        offset.value = targetOffset


没必要加的逻辑

hiyuki · 2024-12-23T11:05:38Z

packages/webpack-plugin/lib/runtime/components/react/mpx-swiper.tsx

+    }
+    const targetOffset = getInitOffset()
+    if (props.autoplay) {
+      pauseLoop()


pause的意义是啥

hiyuki · 2024-12-23T11:06:20Z

packages/webpack-plugin/lib/runtime/components/react/mpx-swiper.tsx

+    const targetOffset = getInitOffset()
+    if (props.autoplay) {
+      pauseLoop()
+      offset.value = targetOffset


autoplay变更只应该开启或者关闭定时器，不应该修改offset.value

hiyuki · 2024-12-23T11:08:31Z

packages/webpack-plugin/lib/runtime/components/react/mpx-swiper.tsx

+    props.bindchange && props.bindchange(eventData)
+  }
+
+  function getInitOffset () {


这个可以直接作为一个index=>offset的转换函数，getOffset(index)=>offset

hiyuki · 2024-12-23T11:19:37Z

packages/webpack-plugin/lib/runtime/components/react/mpx-swiper.tsx

+  })
+
+  useAnimatedReaction(() => step.value, (newIndex, preIndex) => {
+    const targetOffset = getInitOffset()


放在onLayout中，当用户没有在触碰操作时，更新offset.value

luyongfang added 20 commits November 6, 2024 19:09

swiper refactor init

13bbdab

修复循环自动轮播初始化

e3f09a4

add interpolate animateion

0ce5bb5

animation fix & ts

763d32a

修复worklet & JS 通信问题 & 边界场景

ab9c8bf

修复边界问题

e1cb370

修复runOnJs 问题

f3c9706

merge master

3b40f5d

修复 margin问题

d5f2083

修复快速滚动+轮播问题 & 排查y滚

8102f16

swiper 重构拖拽

94c43d1

swiper loop

3fc91c1

fix bug

be7b1a9

swiper 修复连续滑动&滑动中触摸

ec9cdd1

修复eslint

ae983cd

merge master

e79c797

修改组件命名

8063477

调整下位置

63ca5e3

调整下变量命名

5d640ee

修复lint

10566df

hiyuki reviewed Nov 21, 2024

View reviewed changes

hiyuki reviewed Dec 19, 2024

View reviewed changes

comment解决

0ec3d28

hiyuki reviewed Dec 23, 2024

View reviewed changes

优化comment

e90d066

hiyuki reviewed Dec 23, 2024

View reviewed changes

luyongfang added 6 commits December 24, 2024 21:27

swiper gesture事件更新

6e1db24

优化useEffect

ab7db79

修复默认不更新问题

68d6561

修复canMove

475e786

修复选中0

65c704e

feat: 修复反向滚动问题

855fce2

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Swiper重构 #1711

Swiper重构 #1711

xiao19880917lu commented Nov 21, 2024

hiyuki Nov 21, 2024

hiyuki Nov 21, 2024

hiyuki Nov 21, 2024

hiyuki Nov 21, 2024

hiyuki Nov 21, 2024

hiyuki Nov 21, 2024

hiyuki Nov 21, 2024

hiyuki Nov 21, 2024

hiyuki Nov 21, 2024

hiyuki Nov 21, 2024

hiyuki Dec 19, 2024

hiyuki Dec 19, 2024

hiyuki Dec 19, 2024

hiyuki Dec 19, 2024

hiyuki Dec 19, 2024

hiyuki Dec 19, 2024

hiyuki Dec 19, 2024

hiyuki Dec 19, 2024

hiyuki Dec 19, 2024

hiyuki Dec 19, 2024

hiyuki Dec 19, 2024

hiyuki Dec 23, 2024

hiyuki Dec 23, 2024

hiyuki Dec 23, 2024

hiyuki Dec 23, 2024

hiyuki Dec 23, 2024

hiyuki Dec 23, 2024

hiyuki Dec 23, 2024

hiyuki Dec 23, 2024

hiyuki Dec 23, 2024

hiyuki Dec 23, 2024 •

edited

Loading

hiyuki Dec 23, 2024

hiyuki Dec 23, 2024

Swiper重构 #1711

Are you sure you want to change the base?

Swiper重构 #1711

Conversation

xiao19880917lu commented Nov 21, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

hiyuki Dec 23, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

hiyuki Dec 23, 2024 •

edited

Loading