fix(swiper): 修改初始值时不生效问题 (#3293)

xiaoyatong · oasis-cloud · web-flow · commit 1e7d44c2f0dd · 2025-07-04T11:46:14.000+08:00
* fix(swiper): 修改初始值时不生效问题

* fix(swiper): 修改初始值时不生效问题

* fix(swiper): 修订图片预览使用 swiper 时的属性值,及类型

* fix: review

* fix: lock 文件更新

---------

Co-authored-by: oasis &lt;suanbanren@foxmail.com&gt;
diff --git a/packages/nutui-taro-demo/package.json b/packages/nutui-taro-demo/package.json
@@ -64,23 +64,23 @@
     "@nutui/touch-emulator": "^1.0.0",
     "@nutui/lottie-miniprogram": "^1.0.1",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.11",
-    "@tarojs/components": "4.0.12",
-    "@tarojs/helper": "4.0.12",
-    "@tarojs/plugin-framework-react": "4.0.12",
-    "@tarojs/plugin-html": "4.0.12",
-    "@tarojs/plugin-platform-alipay": "4.0.12",
-    "@tarojs/plugin-platform-h5": "4.0.12",
-    "@tarojs/plugin-platform-jd": "4.0.12",
-    "@tarojs/plugin-platform-qq": "4.0.12",
-    "@tarojs/plugin-platform-swan": "4.0.12",
-    "@tarojs/plugin-platform-tt": "4.0.12",
-    "@tarojs/plugin-platform-weapp": "4.0.12",
-    "@tarojs/react": "4.0.12",
-    "@tarojs/router": "4.0.12",
-    "@tarojs/runtime": "4.0.12",
-    "@tarojs/shared": "4.0.12",
-    "@tarojs/taro": "4.0.12",
-    "@tarojs/taro-h5": "4.0.12",
+    "@tarojs/components": "4.1.3",
+    "@tarojs/helper": "4.1.3",
+    "@tarojs/plugin-framework-react": "4.1.3",
+    "@tarojs/plugin-html": "4.1.3",
+    "@tarojs/plugin-platform-alipay": "4.1.3",
+    "@tarojs/plugin-platform-h5": "4.1.3",
+    "@tarojs/plugin-platform-jd": "4.1.3",
+    "@tarojs/plugin-platform-qq": "4.1.3",
+    "@tarojs/plugin-platform-swan": "4.1.3",
+    "@tarojs/plugin-platform-tt": "4.1.3",
+    "@tarojs/plugin-platform-weapp": "4.1.3",
+    "@tarojs/react": "4.1.3",
+    "@tarojs/router": "4.1.3",
+    "@tarojs/runtime": "4.1.3",
+    "@tarojs/shared": "4.1.3",
+    "@tarojs/taro": "4.1.3",
+    "@tarojs/taro-h5": "4.1.3",
     "babel-plugin-import": "^1.13.8",
     "lodash.isequal": "^4.5.0",
     "lodash.kebabcase": "^4.1.1",
@@ -92,10 +92,10 @@
   },
   "devDependencies": {
     "@babel/core": "^7.23.9",
-    "@tarojs/cli": "4.0.12",
-    "@tarojs/plugin-platform-harmony-ets": "4.0.12",
-    "@tarojs/vite-runner": "4.0.12",
-    "@tarojs/webpack5-runner": "4.0.12",
+    "@tarojs/cli": "4.1.3",
+    "@tarojs/plugin-platform-harmony-ets": "4.1.3",
+    "@tarojs/vite-runner": "4.1.3",
+    "@tarojs/webpack5-runner": "4.1.3",
     "@types/react": "^18.2.57",
     "@types/react-dom": "^18.2.19",
     "@types/react-router-dom": "^5.3.3",
@@ -105,9 +105,9 @@
     "@types/webpack-env": "^1.18.4",
     "@typescript-eslint/eslint-plugin": "^7.0.2",
     "@typescript-eslint/parser": "^7.0.2",
-    "babel-preset-taro": "4.0.12",
+    "babel-preset-taro": "4.1.3",
     "eslint": "^8.56.0",
-    "eslint-config-taro": "4.0.12",
+    "eslint-config-taro": "4.1.3",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/packages/imagepreview/demos/taro/demo2.tsx b/src/packages/imagepreview/demos/taro/demo2.tsx
@@ -36,7 +36,6 @@ const Demo2 = () => {
         ))}
       </Cell>
       <ImagePreview
-        autoPlay
         images={images}
         visible={showPreview}
         defaultValue={init}
diff --git a/src/packages/imagepreview/imagepreview.taro.tsx b/src/packages/imagepreview/imagepreview.taro.tsx
@@ -22,6 +22,7 @@ import {
   PreviewVideoOption,
   TaroImagePreviewProps,
 } from '@/types'
+import { mergeProps } from '@/utils'
 
 interface Store {
   scale: number
@@ -46,7 +47,7 @@ const defaultProps = {
   showMenuByLongpress: false,
   onChange: () => {},
   onClose: () => {},
-} as TaroImagePreviewProps
+} as unknown as TaroImagePreviewProps
 export const ImagePreview: FunctionComponent<Partial<TaroImagePreviewProps>> = (
   props
 ) => {
@@ -62,13 +63,15 @@ export const ImagePreview: FunctionComponent<Partial<TaroImagePreviewProps>> = (
     pagination,
     indicator,
     autoPlay,
+    loop,
     closeOnContentClick,
     closeIcon,
     closeIconPosition,
     showMenuByLongpress,
     onClose,
     onChange,
-  } = { ...defaultProps, ...props }
+    ...rest
+  } = mergeProps(defaultProps, props)
   const classPrefix = 'nut-imagepreview'
   const ref = useRef<HTMLDivElement | null>(null)
   const [innerNo, setInnerNo] = usePropsValue<number>({
@@ -223,17 +226,17 @@ export const ImagePreview: FunctionComponent<Partial<TaroImagePreviewProps>> = (
         onTouchCancel={onTouchEnd}
       >
         <Swiper
-          autoPlay={autoPlay}
+          autoplay={autoPlay}
+          loop={loop}
+          direction="horizontal"
           className={`${classPrefix}-swiper`}
-          loop
           height="100%"
           style={{
             display: showPop ? 'block' : 'none',
             '--nutui-indicator-color': indicatorColor,
             width: '100%',
             height: '100%',
           }}
-          direction="horizontal"
           onChange={(e) => slideChangeEnd(e.detail.current)}
           defaultValue={innerNo && (innerNo > maxNo ? maxNo - 1 : innerNo - 1)}
           indicator={indicator}
diff --git a/src/packages/imagepreview/imagepreview.tsx b/src/packages/imagepreview/imagepreview.tsx
@@ -19,6 +19,7 @@ import {
   PreviewVideoOption,
   WebImagePreviewProps,
 } from '@/types'
+import { mergeProps } from '@/utils'
 
 interface Store {
   scale: number
@@ -42,7 +43,7 @@ const defaultProps = {
   closeIconPosition: 'top-right',
   onChange: () => {},
   onClose: () => {},
-} as WebImagePreviewProps
+} as unknown as WebImagePreviewProps
 export const ImagePreview: FunctionComponent<Partial<WebImagePreviewProps>> = (
   props
 ) => {
@@ -63,7 +64,8 @@ export const ImagePreview: FunctionComponent<Partial<WebImagePreviewProps>> = (
     closeIconPosition,
     onClose,
     onChange,
-  } = { ...defaultProps, ...props }
+    ...rest
+  } = mergeProps(defaultProps, props)
   const classPrefix = 'nut-imagepreview'
   const ref = useRef<HTMLDivElement | null>(null)
   const [innerNo, setInnerNo] = usePropsValue<number>({
@@ -218,17 +220,15 @@ export const ImagePreview: FunctionComponent<Partial<WebImagePreviewProps>> = (
       >
         {showPop && (
           <Swiper
-            autoPlay={!!duration}
-            duration={duration}
+            autoplay={!!duration}
             className={`${classPrefix}-swiper`}
-            loop
             style={{
               '--nutui-indicator-color': indicatorColor,
             }}
-            direction="horizontal"
             onChange={(page) => slideChangeEnd(page)}
             defaultValue={innerNo > maxNo ? maxNo - 1 : innerNo - 1}
             indicator={indicator}
+            {...rest}
           >
             {[
               ...videos.map((item) => ({ type: 'video', data: item })),
diff --git a/src/packages/swiper/index.taro.ts b/src/packages/swiper/index.taro.ts
@@ -5,9 +5,7 @@ import { TaroSwiperProps } from '@/types'
 
 export type { TaroSwiperProps as SwiperProps } from '@/types'
 type CompoundedComponent = React.ForwardRefExoticComponent<
-  Partial<TaroSwiperProps> &
-    Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> &
-    React.RefAttributes<any>
+  Partial<TaroSwiperProps> & React.RefAttributes<any>
 > & {
   Item: typeof SwiperItem
 }
diff --git a/src/packages/swiper/swiper.taro.tsx b/src/packages/swiper/swiper.taro.tsx
@@ -1,4 +1,10 @@
-import React, { Children, useImperativeHandle, useMemo, useState } from 'react'
+import React, {
+  Children,
+  useImperativeHandle,
+  useMemo,
+  useState,
+  useEffect,
+} from 'react'
 import {
   Swiper as TaroSwiper,
   SwiperItem as TSwiperItem,
@@ -47,6 +53,7 @@ export const Swiper = React.forwardRef(
       ...defaultProps,
       ...props,
     }
+
     const [innerValue, setInnerValue] = useState(current || defaultValue)
     const childrenCount = useMemo(() => {
       let c = 0
@@ -55,6 +62,11 @@ export const Swiper = React.forwardRef(
       })
       return c
     }, [children])
+
+    useEffect(() => {
+      setInnerValue(current || defaultValue)
+    }, [defaultValue, current])
+
     const renderIndicator = () => {
       if (React.isValidElement(indicator)) return indicator
       if (indicator || indicatorDots) {
@@ -76,11 +88,13 @@ export const Swiper = React.forwardRef(
       }
       return null
     }
+
     const handleOnChange: CommonEventFunction<
       TSwiperProps.onChangeEventDetail
     > = (value) => {
       setInnerValue(value.detail.current)
     }
+
     useImperativeHandle(ref, () => ({
       to: (value: number) => {
         setInnerValue(value)
@@ -104,6 +118,7 @@ export const Swiper = React.forwardRef(
         }
       },
     }))
+
     return (
       <View
         className={classNames(classPrefix, className)}
diff --git a/src/types/spec/imagepreview/h5.ts b/src/types/spec/imagepreview/h5.ts
@@ -1,3 +1,5 @@
 import { BaseImagePreview } from './base'
+import { WebSwiperProps } from '@/types'
 
-export interface WebImagePreviewProps extends BaseImagePreview {}
+type props = BaseImagePreview & Omit<WebSwiperProps, 'autoPlay' | 'indicator'>
+export interface WebImagePreviewProps extends Omit<props, 'autoplay'> {}
diff --git a/src/types/spec/imagepreview/taro.ts b/src/types/spec/imagepreview/taro.ts
@@ -1,7 +1,9 @@
 import { BaseImagePreview } from './base'
+import { TaroSwiperProps } from '@/types'
 
-export interface TaroImagePreviewProps
-  extends Omit<BaseImagePreview, 'autoPlay'> {
+type props = Omit<BaseImagePreview, 'autoPlay'> &
+  Omit<TaroSwiperProps, 'autoPlay' | 'autoplay' | 'indicator'>
+export interface TaroImagePreviewProps extends props {
   autoPlay: boolean
   showMenuByLongpress: boolean
 }
