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 · 2025-01-02T08:24:11Z

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

+        renderChild = [lastChild].concat(renderChild).concat([firstChild])
+      }
+    }
+    const arrChilds = renderChild.map((child, index) => {


arrChildren

这个itemAnimatedStyle是不是可以在swiper-item内生成就可以

hiyuki · 2025-01-02T08:29:27Z

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

+      const newChild = React.cloneElement(child, {
+        itemIndex: index,
+        customStyle: [itemAnimatedStyles, extraStyle],
+        key: 'page' + index


不需要自己去定义key，有可能会覆盖用户定义的key

hiyuki · 2025-01-02T08:35:35Z

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

+
+  useAnimatedReaction(() => currentIndex.value, (newIndex, preIndex) => {
+    // 这里必须传递函数名, 直接写()=> {}形式会报 访问了未sharedValue信息
+    const isInit = !preIndex && newIndex === 0


isInit的的判断为啥需要newIndex === 0，用户可以直接传props定义非0的初始index吧

currentIndex基于props.current进行初始化

hiyuki · 2025-01-02T08:39:19Z

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

+    }
+  }
+
+  function getOffset (index?: number) {


index参数改为必传吧

getOffset不需要是worklet

hiyuki · 2025-01-02T09:50:18Z

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

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


基于props.current初始化

hiyuki · 2025-01-02T09:51:20Z

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

+  // 记录选中元素的索引值
+  const currentIndex = useSharedValue(0)
+  // 记录元素的偏移量
+  const offset = useSharedValue(0)


基于props.current调用getOffset进行初始化

hiyuki · 2025-01-02T09:52:26Z

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

+  }
+
+  function renderItems () {
+    const itemAnimatedStyles = useAnimatedStyle(() => {


这个可以直接在swiperItem中的useAnimatedStyle进行

hiyuki · 2025-01-06T10:14:30Z

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

+
+  function loop () {
+    timerId.current = setTimeout(() => {
+      createAutoPlay()


无效的箭头函数包裹

hiyuki · 2025-01-06T10:14:46Z

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

+      runOnUI(() => {
+        offset.value = getOffset(currentIndex.value)
+      })()
+      pauseLoop()


看一下必要性

hiyuki · 2025-01-06T10:50:46Z

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

+  const currentIndex = useSharedValue(props.current || 0)
+  // 确保在UI线程能拿到最新的值
+  const getOffset = (index: number) => {
+    'worklet'


step作为参数，改造为普通函数

totalElements.value 直接访问children.length

hiyuki · 2025-01-06T10:51:47Z

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

+  const initStep: number = isNaN(pstep) ? 0 : pstep
+  // 每个元素的宽度 or 高度，有固定值直接初始化无则0
+  const step = useSharedValue(initStep)
+  const totalElements = useSharedValue(children.length)


childrenLength

hiyuki · 2025-01-06T10:55:19Z

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

+  // 用户点击未移动状态下,记录用户上一次操作的transtion 的 direction
+  const customTrans = useSharedValue(0)
+  const intervalTimer = props.interval || 500
+  totalElements.value = children.length


useEffect包裹

hiyuki · 2025-01-07T07:09:51Z

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

+      // 业务swiper-item自己生成key，内部添加的元素自定义key
+      const newChild = React.cloneElement(child, {
+        itemIndex: index,
+        customStyle: [extraStyle]


不需要数组

hiyuki · 2025-01-07T08:46:06Z

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

+  // 按照长按的处理情况：1. 用户先快速滑动，再未滑动到目标位置时再次按下然后抬起；2. 用户在正常情况下点击没有触发移动
+  function handleLongPress (eventData: EventDataType) {
+    'worklet'
+    const { translation } = eventData


translation计算逻辑确认

hiyuki · 2025-01-07T10:15:43Z

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

+    })
+    .onTouchesUp((e) => {
+      'worklet'
+      const touchEventData = e.changedTouches[0]


if(veloctity<threshold){
handleEnd(currentIndex)
} else {
if(offsetDiff>0) handleEnd(currentIndex+1)
else handleEnd(currentIndex-1)
}

在move当中基于offset实时更新currentIndex

hiyuki · 2025-01-07T10:31:04Z

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

+      if (!props.circular && !canMove(eventData)) {
+        return
+      }
+      if (!moveDistance) {


没必要保留这个分支

hiyuki · 2025-01-09T06:44:00Z

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

+  }, [props.current])
+
+  useEffect(() => {
+    if (!step.value) {


这里不需要return

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

feat: 修复反向滚动问题

855fce2

hiyuki reviewed Jan 2, 2025

View reviewed changes

luyongfang added 4 commits January 5, 2025 20:28

优化comment

199c746

feat: 修改lint

ed9ee2b

Merge branch 'master' into feat-swiper-refactor

3e2a5a5

Merge branch 'master' into feat-swiper-refactor

3f96a4a

hiyuki reviewed Jan 6, 2025

View reviewed changes

luyongfang added 2 commits January 7, 2025 10:55

优化comment

619ec81

优化comment删除wrapperLayout中的loop

3a12508

hiyuki reviewed Jan 7, 2025

View reviewed changes

优化

74954ac

hiyuki reviewed Jan 7, 2025

View reviewed changes

luyongfang added 3 commits January 7, 2025 20:22

优化

1140d20

onWrapperLayout 增加pauseLoop

fd78078

修复children变化时当前滚动到的索引位置大的问题

1875716

hiyuki reviewed Jan 9, 2025

View reviewed changes

luyongfang added 2 commits January 10, 2025 15:25

优化swiper

1317412

修复lint

3a11d4b

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 Jan 2, 2025

hiyuki Jan 2, 2025

hiyuki Jan 2, 2025 •

edited

Loading

hiyuki Jan 2, 2025

hiyuki Jan 2, 2025

hiyuki Jan 2, 2025 •

edited

Loading

hiyuki Jan 2, 2025

hiyuki Jan 2, 2025

hiyuki Jan 2, 2025

hiyuki Jan 2, 2025

hiyuki Jan 6, 2025

hiyuki Jan 6, 2025

hiyuki Jan 6, 2025

hiyuki Jan 6, 2025

hiyuki Jan 6, 2025 •

edited

Loading

hiyuki Jan 6, 2025

hiyuki Jan 7, 2025

hiyuki Jan 7, 2025

hiyuki Jan 7, 2025

hiyuki Jan 7, 2025

hiyuki Jan 9, 2025

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

hiyuki Jan 2, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

hiyuki Jan 2, 2025 • edited Loading

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 Jan 6, 2025 • edited Loading

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 Jan 2, 2025 •

edited

Loading

hiyuki Jan 2, 2025 •

edited

Loading

hiyuki Jan 6, 2025 •

edited

Loading