feat: 修订autoplay属性,并在taro版本上对齐了tc属性值

xiaoyatong · xiaoyatong · commit 5ce79c914cc5 · 2025-05-18T14:14:03.000+08:00
diff --git a/src/packages/swiper/demos/h5/demo1.tsx b/src/packages/swiper/demos/h5/demo1.tsx
@@ -10,7 +10,7 @@ const list = [
 const Demo1 = () => {
   return (
     <div className="demo-box" style={{ height: 150 }}>
-      <Swiper autoPlay loop indicator>
+      <Swiper autoplay loop indicator>
         {list.map((item, index) => {
           return (
             <Swiper.Item key={item}>
diff --git a/src/packages/swiper/demos/taro/demo1.tsx b/src/packages/swiper/demos/taro/demo1.tsx
@@ -19,17 +19,19 @@ const Demo1 = () => {
     console.log(`onChange is trigger ${e}`)
   }
   return (
-    <Swiper defaultValue={1} autoPlay indicator onChange={onChange}>
-      {list.map((item, index) => (
-        <Swiper.Item key={item}>
-          <Image
-            style={{ width: '100%', height: '100%' }}
-            onClick={() => console.log(index)}
-            src={item}
-          />
-        </Swiper.Item>
-      ))}
-    </Swiper>
+    <>
+      <Swiper defaultValue={2} autoplay indicator onChange={onChange}>
+        {list.map((item, index) => (
+          <Swiper.Item key={item}>
+            <Image
+              style={{ width: '100%', height: '100%' }}
+              onClick={() => console.log(index)}
+              src={item}
+            />
+          </Swiper.Item>
+        ))}
+      </Swiper>
+    </>
   )
 }
 export default Demo1
diff --git a/src/packages/swiper/demos/taro/demo5.tsx b/src/packages/swiper/demos/taro/demo5.tsx
@@ -44,7 +44,24 @@ function Demo5() {
           setCurrent2(e.detail.current)
         }}
         indicator={
-          <View className="page">
+          <View
+            style={{
+              display: 'flex',
+              flexDirection: 'row',
+              justifyContent: 'center',
+              alignItems: 'center',
+              position: 'absolute',
+              left: '85%',
+              top: pxTransform(120),
+              width: pxTransform(46),
+              height: pxTransform(22),
+              backgroundColor: 'rgba(0, 0, 0, 0.33)',
+              borderRadius: pxTransform(22),
+              textAlign: 'center',
+              fontSize: pxTransform(14),
+              zIndex: 1,
+            }}
+          >
             <Text>
               {current2 + 1}/{list.length}
             </Text>
diff --git a/src/packages/swiper/demos/taro/demo7.tsx b/src/packages/swiper/demos/taro/demo7.tsx
@@ -1,9 +1,8 @@
-import React, { useState } from 'react'
+import React from 'react'
 import { Swiper } from '@nutui/nutui-react-taro'
 import { Image } from '@tarojs/components'
 
 const Demo7 = () => {
-  const [initPage8, setInitPage8] = useState(0)
   const list = [
     'https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg',
     'https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg',
diff --git a/src/packages/swiper/demos/taro/demo8.tsx b/src/packages/swiper/demos/taro/demo8.tsx
@@ -10,7 +10,7 @@ const Demo8 = () => {
     'https://storage.360buyimg.com/jdc-article/fristfabu.jpg',
   ]
   return (
-    <View className="demo-box vertical-center">
+    <View>
       <Swiper
         defaultValue={0}
         direction="vertical"
diff --git a/src/packages/swiper/demos/taro/demo9.tsx b/src/packages/swiper/demos/taro/demo9.tsx
@@ -7,7 +7,7 @@ const Demo9 = () => {
     <Swiper
       height={pxTransform(120)}
       loop
-      autoPlay
+      autoplay
       style={{
         justifyContent: 'flex-start',
         alignItems: 'flex-start',
diff --git a/src/packages/swiper/doc.en-US.md b/src/packages/swiper/doc.en-US.md
@@ -29,7 +29,7 @@ const App = () => {
   return (
     <div className="demo-box" style={{ height: 150 }}>
       <Swiper
-        autoPlay
+        autoplay
         loop
         slideSize={300}
         indicator
@@ -428,7 +428,7 @@ export default App
 | indicator | Whether the pagination indicator is displayed | `boolean` | `false` |
 | loop | Whether to rotate | `boolean` | `true` |
 | duration | Animation duration（Unit ms | `number` \| `string` | `500` |
-| autoPlay | Automatic rotation duration, 0 means no automatic | `number` \| `string` | `0` |
+| autoplay | Automatic rotation duration, 0 means no automatic | `number` \| `string` | `0` |
 | defaultValue | Initialize index value | `number` \| `string` | `0` |
 | touchable | Is it possible to touch swipe | `boolean` | `true` |
 | onChange | Callback after card switching | `(current: number) => void` | `-` |
diff --git a/src/packages/swiper/doc.md b/src/packages/swiper/doc.md
@@ -30,7 +30,7 @@ const App = () => {
   return (
     <div className="demo-box" style={{ height: 150 }}>
       <Swiper
-        autoPlay
+        autoplay
         loop
         slideSize={300}
         indicator
@@ -427,7 +427,7 @@ export default App
 | indicator | 分页指示器是否展示，可传入自定义的 HTML 结构 | `ReactNode` | `false` |
 | loop | 是否循环轮播 | `boolean` | `true` |
 | duration | 动画时长（单位是ms） | `number` \| `string` | `500` |
-| autoPlay | 自动轮播时长，0表示不会自动轮播 | `number` \| `string` | `0` |
+| autoplay | 自动轮播时长，0表示不会自动轮播 | `number` \| `string` | `0` |
 | defaultValue | 初始化索引值 | `number` \| `string` | `0` |
 | touchable | 是否可触摸滑动 | `boolean` | `true` |
 | onChange | 卡片切换后的回调 | `(current: number) => void` | `-` |
diff --git a/src/packages/swiper/doc.taro.md b/src/packages/swiper/doc.taro.md
@@ -105,7 +105,7 @@ import { Swiper } from '@nutui/nutui-react-taro'
 | direction | 轮播方向 | `horizontal` \| `vertical` | `horizontal` |
 | indicator | 分页指示器是否展示 | `boolean` | `false` |
 | loop | 是否循环轮播 | `boolean` | `true` |
-| autoPlay | 自动轮播 | `boolean` | `false` |
+| autoplay | 自动轮播 | `boolean` | `false` |
 | defaultValue | 初始化索引值 | `number` | `0` |
 | onChange | 卡片切换后的回调 | `CommonEventFunction<TaroSwiperProps.onChangeEventDetail>` | `-` |
 
diff --git a/src/packages/swiper/doc.zh-TW.md b/src/packages/swiper/doc.zh-TW.md
@@ -30,7 +30,7 @@ const App = () => {
   return (
     <div className="demo-box" style={{ height: 150 }}>
       <Swiper
-        autoPlay
+        autoplay
         loop
         slideSize={300}
         indicator
diff --git a/src/packages/swiper/swiper.taro.tsx b/src/packages/swiper/swiper.taro.tsx
@@ -1,10 +1,4 @@
-import React, {
-  Children,
-  useEffect,
-  useImperativeHandle,
-  useMemo,
-  useState,
-} from 'react'
+import React, { Children, useImperativeHandle, useMemo, useState } from 'react'
 import {
   Swiper as TaroSwiper,
   SwiperItem as TSwiperItem,
@@ -21,6 +15,7 @@ const defaultProps = {
   direction: 'horizontal',
   indicator: false,
   autoPlay: false,
+  autoplay: false,
   loop: false,
   defaultValue: 0,
   style: {},
@@ -35,43 +30,46 @@ export const Swiper = React.forwardRef(
       className,
       children,
       indicator,
+      indicatorDots,
       loop,
+      circular,
       autoPlay,
+      autoplay,
       duration,
+      vertical,
       direction,
       defaultValue,
+      current,
       onChange,
       style,
       ...rest
     } = {
       ...defaultProps,
       ...props,
     }
-    const [current, setCurrent] = useState(defaultValue)
+    const [innerValue, setInnerValue] = useState(current || defaultValue)
     const childrenCount = useMemo(() => {
       let c = 0
       React.Children.map(children, (child, index) => {
         c += 1
       })
       return c
     }, [children])
-    useEffect(() => {
-      setCurrent(defaultValue)
-    }, [defaultValue])
     const renderIndicator = () => {
       if (React.isValidElement(indicator)) return indicator
-      if (indicator) {
+      if (indicator || indicatorDots) {
         return (
           <View
             className={classNames({
               [`${classPrefix}-indicator`]: true,
-              [`${classPrefix}-indicator-vertical`]: direction === 'vertical',
+              [`${classPrefix}-indicator-vertical`]:
+                direction === 'vertical' || vertical,
             })}
           >
             <Indicator
-              current={current}
+              current={innerValue}
               total={childrenCount}
-              direction={direction}
+              direction={vertical ? 'vertical' : direction}
             />
           </View>
         )
@@ -81,26 +79,28 @@ export const Swiper = React.forwardRef(
     const handleOnChange: CommonEventFunction<
       TSwiperProps.onChangeEventDetail
     > = (value) => {
-      setCurrent(value.detail.current)
+      setInnerValue(value.detail.current)
     }
     useImperativeHandle(ref, () => ({
       to: (value: number) => {
-        setCurrent(value)
+        setInnerValue(value)
       },
       next: () => {
         if (loop) {
-          setCurrent((current + 1) % childrenCount)
+          setInnerValue((innerValue + 1) % childrenCount)
         } else {
-          setCurrent(current + 1 >= childrenCount ? current : current + 1)
+          setInnerValue(
+            innerValue + 1 >= childrenCount ? innerValue : innerValue + 1
+          )
         }
       },
       prev: () => {
         if (loop) {
-          let next = current - 1
+          let next = innerValue - 1
           next = next < 0 ? childrenCount + next : next
-          setCurrent(next % childrenCount)
+          setInnerValue(next % childrenCount)
         } else {
-          setCurrent(current - 1 <= 0 ? 0 : current - 1)
+          setInnerValue(innerValue - 1 <= 0 ? 0 : innerValue - 1)
         }
       },
     }))
@@ -121,10 +121,10 @@ export const Swiper = React.forwardRef(
           }}
         >
           <TaroSwiper
-            current={current}
+            current={innerValue}
             circular={loop}
-            autoplay={autoPlay}
-            vertical={direction === 'vertical'}
+            autoplay={autoplay || autoPlay}
+            vertical={direction === 'vertical' || vertical}
             indicatorDots={false}
             onChange={(e) => {
               handleOnChange(e)
diff --git a/src/packages/swiper/swiper.tsx b/src/packages/swiper/swiper.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useRef, useState } from 'react'
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useDrag } from '@use-gesture/react'
 import { useSpring } from '@react-spring/web'
 import classNames from 'classnames'
@@ -18,6 +18,7 @@ const defaultProps = {
   loop: false,
   duration: 3000,
   autoPlay: false,
+  autoplay: false,
   defaultValue: 0,
   touchable: true,
   effect: undefined,
@@ -33,6 +34,7 @@ export const Swiper = React.forwardRef<SwiperRef, Partial<WebSwiperProps>>(
       loop,
       effect,
       autoPlay,
+      autoplay,
       touchable,
       defaultValue,
       duration,
@@ -95,23 +97,30 @@ export const Swiper = React.forwardRef<SwiperRef, Partial<WebSwiperProps>>(
     const [transforms, setTransforms] = useList(effect, count, current)
 
     // 自动播放
-    const runTimeSwiper = () => {
+    const runTimeSwiper = useCallback(() => {
       const durationNumber =
         typeof duration === 'string' ? parseInt(duration) : duration
-      const d = typeof autoPlay === 'number' ? autoPlay : durationNumber
+      let d = durationNumber
+      if (typeof autoPlay === 'number') {
+        d = autoPlay
+      }
+      if (typeof autoplay === 'number') {
+        d = autoplay
+      }
       timeoutRef.current = window.setTimeout(() => {
         next()
         runTimeSwiper()
       }, d)
-    }
+    }, [autoPlay, autoplay, duration])
+
     useEffect(() => {
-      if (!autoPlay || dragging) return
+      if (!autoPlay || !autoplay || dragging) return
       runTimeSwiper()
 
       return () => {
         if (timeoutRef.current) window.clearTimeout(timeoutRef.current)
       }
-    }, [autoPlay, duration, dragging, count])
+    }, [autoPlay, autoplay, duration, dragging, count, runTimeSwiper])
 
     function boundIndex(current: number) {
       const min = 0
diff --git a/src/sites/sites-react/doc/docs/react/migrate-from-v2.en-US.md b/src/sites/sites-react/doc/docs/react/migrate-from-v2.en-US.md
@@ -287,7 +287,11 @@ If your project uses these components, please read the documentation carefully a
 
   [//]: # '#### Steps'
   [//]: # '#### Step'
-  [//]: # '#### Swiper'
+
+#### Swiper
+
+- Changed `autoPlay` to `autoplay`
+
   [//]: # '#### Table'
   [//]: # '#### Tag'
   [//]: # '#### TrendArrow'
diff --git a/src/sites/sites-react/doc/docs/react/migrate-from-v2.md b/src/sites/sites-react/doc/docs/react/migrate-from-v2.md
@@ -328,7 +328,10 @@ plugins: [
 - 修改 `title` 和 `description` 的类型为 `ReactNode`
 - 新增 `type` 属性，设置步骤条类型
 
-  [//]: # '#### Swiper'
+#### Swiper
+
+- 修改 `autoPlay` 为 `autoplay`
+
   [//]: # '#### Table'
   [//]: # '#### Tag'
   [//]: # '#### TrendArrow'
diff --git a/src/sites/sites-react/doc/docs/taro/migrate-from-v2.en-US.md b/src/sites/sites-react/doc/docs/taro/migrate-from-v2.en-US.md
@@ -287,7 +287,11 @@ If your project uses these components, please read the documentation carefully a
 
   [//]: # '#### Steps'
   [//]: # '#### Step'
-  [//]: # '#### Swiper'
+
+#### Swiper
+
+- Changed `autoPlay` to `autoplay`
+
   [//]: # '#### Table'
   [//]: # '#### Tag'
   [//]: # '#### TrendArrow'
diff --git a/src/sites/sites-react/doc/docs/taro/migrate-from-v2.md b/src/sites/sites-react/doc/docs/taro/migrate-from-v2.md
@@ -327,7 +327,10 @@ plugins: [
 - 修改 `title` 和 `description` 的类型为 `ReactNode`
 - 新增 `type` 属性，设置步骤条类型
 
-  [//]: # '#### Swiper'
+#### Swiper
+
+- 修改 `autoPlay` 为 `autoplay`
+
   [//]: # '#### Table'
   [//]: # '#### Tag'
   [//]: # '#### TrendArrow'
diff --git a/src/types/spec/swiper/base.ts b/src/types/spec/swiper/base.ts
@@ -18,7 +18,11 @@ export interface BaseSwiper extends BaseProps {
   indicator: ReactNode
   loop: boolean
   duration: SimpleValue
+  /**
+   * @deprecated Please use `autoplay` prop instead.
+   */
   autoPlay: boolean | number
+  autoplay: boolean | number
   defaultValue: number
   touchable: boolean
   effect: FocusEffect | undefined
diff --git a/src/types/spec/swiper/taro.ts b/src/types/spec/swiper/taro.ts

Original file line number	Diff line number	Diff line change
`@@ -10,7 +10,7 @@ const Demo8 = () => {`
`10`	`10`	`'https://storage.360buyimg.com/jdc-article/fristfabu.jpg',`
`11`	`11`	`]`
`12`	`12`	`return (`
`13`		`- <View className="demo-box vertical-center">`
	`13`	`+ <View>`
`14`	`14`	`<Swiper`
`15`	`15`	`defaultValue={0}`
`16`	`16`	`direction="vertical"`