feat: Swiper 组件增加指示器的默认背景色配置 (#552)

jdf2e · Dec 23, 2022 · d33c6a3 · d33c6a3
1 parent a46b48f
commit d33c6a3
Show file tree

Hide file tree

Showing 8 changed files with 50 additions and 39 deletions.
diff --git a/src/packages/swiper/demo.taro.tsx b/src/packages/swiper/demo.taro.tsx
@@ -42,6 +42,7 @@ const SwiperDemo = () => {
   const swiperRef = React.useRef<any>(null)
   const [height, setHeight] = useState<any>(150)
   const [paginationColor, setPaginationColor] = useState<string>('#426543')
+  const [paginationBgColor, setPaginationBgColor] = useState<string>('#426ddd')
   const [initPage1, setInitPage1] = useState<any>(0)
   const [initPage2, setInitPage2] = useState<any>(0)
   const [initPage3, setInitPage3] = useState<any>(0)
@@ -91,6 +92,7 @@ const SwiperDemo = () => {
         <Swiper
           height={height}
           paginationColor={paginationColor}
+          paginationBgColor={paginationBgColor}
           autoPlay="2000"
           initPage={initPage1}
           onChange={onChange}

diff --git a/src/packages/swiper/demo.tsx b/src/packages/swiper/demo.tsx
@@ -44,6 +44,7 @@ const SwiperDemo = () => {
   const swiperRef = React.useRef<any>(null)
   const [height, setHeight] = useState<any>(150)
   const [paginationColor, setPaginationColor] = useState<string>('#426543')
+  const [paginationBgColor, setPaginationBgColor] = useState<string>('#426ddd')
   const [initPage1, setInitPage1] = useState<any>(0)
   const [initPage2, setInitPage2] = useState<any>(0)
   const [initPage3, setInitPage3] = useState<any>(0)
@@ -93,6 +94,7 @@ const SwiperDemo = () => {
         <Swiper
           height={height}
           paginationColor={paginationColor}
+          paginationBgColor={paginationBgColor}
           autoPlay="2000"
           initPage={initPage1}
           onChange={onChange}

diff --git a/src/packages/swiper/doc.en-US.md b/src/packages/swiper/doc.en-US.md
@@ -13,13 +13,13 @@ import { Swiper,SwiperItem } from '@nutui/nutui-react';
 import { Swiper,SwiperItem } from '@nutui/nutui-react-taro';
 ```
 
-
 ### Basic Usage
 
 `autoPlay` Duration of automatic rotation
 `initPage` Initial index value
 `paginationVisible` Show paging indicator
 `paginationColor` Indicator color customization
+`paginationBgColor`  Indicator backgroundColor customization
 `onChange` When the card changes
 
 :::demo
@@ -38,6 +38,7 @@ const App = () => {
       <Swiper
         height={height}
         paginationColor="#426543"
+        paginationBgColor='#426ddd'
         autoPlay="3000"
         initPage={initPage1}
         paginationVisible
@@ -474,6 +475,7 @@ export default App;
 | direction         | Rotation direction, optional value：`horizontal`,`vertical` | String                    | 'horizontal'      |
 | paginationVisible | Whether the pagination indicator is displayed                     | Boolean                   | false             |
 | paginationColor   | Pagination indicator selected color                   | String                    | '#fff'            |
+| paginationBgColor`v1.4.1` | Pagination indicator backgroundcolor | String | '#ddd'            |
 | 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                 |

diff --git a/src/packages/swiper/doc.md b/src/packages/swiper/doc.md
@@ -13,14 +13,13 @@ import { Swiper,SwiperItem } from '@nutui/nutui-react';
 import { Swiper,SwiperItem } from '@nutui/nutui-react-taro';
 ```
 
-## 代码演示
-
 ### 基础用法
 
 `autoPlay` 自动轮播的时长
 `initPage` 初始索引值
 `paginationVisible` 是否显示分页指示器
 `paginationColor` 指示器颜色自定义
+`paginationBgColor` 指示器背景颜色自定义
 `onChange` 当卡片发生变化
 
 :::demo
@@ -39,6 +38,7 @@ const App = () => {
       <Swiper
         height={height}
         paginationColor="#426543"
+        paginationBgColor='#426ddd'
         autoPlay="3000"
         initPage={initPage1}
         paginationVisible
@@ -475,6 +475,7 @@ export default App;
 | direction         | 轮播方向,可选值`horizontal`,`vertical` | String                    | 'horizontal'      |
 | paginationVisible | 分页指示器是否展示                     | Boolean                   | false             |
 | paginationColor   | 分页指示器选中的颜色                   | String                    | '#fff'            |
+| paginationBgColor`v1.4.1` | 分页指示器的背景色 | String | '#ddd'            |
 | loop              | 是否循环轮播                           | Boolean                   | true              |
 | duration          | 动画时长（单位是ms）                   | Number \| String          | 500               |
 | autoPlay          | 自动轮播时长，0表示不会自动轮播        | Number \| String          | 0                 |
@@ -483,7 +484,7 @@ export default App;
 | pageContent       | 自定义指示器                           | String \| React.ReactNode | -                 |
 | isPreventDefault  | 滑动过程中是否禁用默认事件             | Boolean                   | true              |
 | isStopPropagation | 滑动过程中是否禁止冒泡                 | Boolean                   | true              |
-| isCenter`v1.3.0` | 是否居中展示，必须传对应的`width` 和 `height`                  | Boolean                   | false              |
+| isCenter`v1.3.0` | 是否居中展示，必须传对应的`width` 和 `height` | Boolean | false              |
 
 
 
@@ -494,7 +495,6 @@ export default App;
 | onChange | 卡片切换后的回调 | 当前索引值index |
 
 
-
 ### API
 
 | 事件名 | 说明           | 参数         |

diff --git a/src/packages/swiper/doc.zh-TW.md b/src/packages/swiper/doc.zh-TW.md
@@ -13,14 +13,13 @@ import { Swiper,SwiperItem } from '@nutui/nutui-react';
 import { Swiper,SwiperItem } from '@nutui/nutui-react-taro';
 ```
 
-## 代码演示
-
 ### 基础用法
 
 `autoPlay` 自动轮播的时长
 `initPage` 初始索引值
 `paginationVisible` 是否显示分页指示器
 `paginationColor` 指示器颜色自定义
+`paginationBgColor` 指示器背景颜色自定义
 `onChange` 当卡片发生变化
 
 :::demo
@@ -35,9 +34,11 @@ const App = () => {
     // do something
   }
   return (
+    <div className="demo-box" style={{ height: 150 }}>
     <Swiper
       height={height}
       paginationColor="#426543"
+      paginationBgColor='#426ddd'
       autoPlay="3000"
       initPage={initPage1}
       paginationVisible
@@ -56,6 +57,7 @@ const App = () => {
         <img src="https://storage.360buyimg.com/jdc-article/fristfabu.jpg" alt="" />
       </SwiperItem>
     </Swiper>
+    </div>
   )
 }
 export default App;
@@ -84,21 +86,23 @@ const App = () => {
     }, 3000)
   }, [])
   return (
-    <Swiper
-      height={height}
-      paginationColor="#426543"
-      autoPlay="3000"
-      initPage={initPage1}
-      paginationVisible
-    >
-      {list.map((item) => {
-        return (
-          <SwiperItem key={item}>
-            <img src={item} alt="" />
-          </SwiperItem>
-        )
-      })}
-    </Swiper>
+    <div className="demo-box" style={{ height: 150 }}>
+      <Swiper
+        height={height}
+        paginationColor="#426543"
+        autoPlay="3000"
+        initPage={initPage1}
+        paginationVisible
+      >
+        {list.map((item) => {
+          return (
+            <SwiperItem key={item}>
+              <img src={item} alt="" />
+            </SwiperItem>
+          )
+        })}
+      </Swiper>
+    </div>
   )
 }
 export default App;
@@ -463,6 +467,7 @@ export default App;
 | direction         | 轮播方向,可选值`horizontal`,`vertical` | String                    | 'horizontal'      |
 | paginationVisible | 分页指示器是否展示                     | Boolean                   | false             |
 | paginationColor   | 分页指示器选中的颜色                   | String                    | '#fff'            |
+| paginationBgColor`v1.4.1` | 分页指示器的背景色 | String | '#ddd'            |
 | loop              | 是否循环轮播                           | Boolean                   | true              |
 | duration          | 动画时长（单位是ms）                   | Number \| String          | 500               |
 | autoPlay          | 自动轮播时长，0表示不会自动轮播        | Number \| String          | 0                 |
@@ -471,7 +476,7 @@ export default App;
 | pageContent       | 自定义指示器                           | String \| React.ReactNode | -                 |
 | isPreventDefault  | 滑动过程中是否禁用默认事件             | Boolean                   | true              |
 | isStopPropagation | 滑动过程中是否禁止冒泡                 | Boolean                   | true              |
-| isCenter | 是否居中展示，必须传对应的`width` 和 `height`                  | Boolean                   | false              |
+| isCenter`v1.3.0` | 是否居中展示，必须传对应的`width` 和 `height` | Boolean | false              |
 
 
 
@@ -482,7 +487,6 @@ export default App;
 | onChange | 卡片切换后的回调 | 当前索引值index |
 
 
-
 ### API
 
 | 事件名 | 说明           | 参数         |

diff --git a/src/packages/swiper/swiper.scss b/src/packages/swiper/swiper.scss
@@ -31,9 +31,6 @@
       }
     }
   }
-  &__pagination-item {
-    background-color: $swiper-pagination-item-background-color;
-  }
   &__pagination-vertical {
     top: 50%;
     left: 12px;

diff --git a/src/packages/swiper/swiper.taro.tsx b/src/packages/swiper/swiper.taro.tsx
@@ -22,6 +22,7 @@ export interface SwiperProps {
   autoPlay: number | string
   direction: 'horizontal' | 'vertical'
   paginationColor: string
+  paginationBgColor: string
   paginationVisible: boolean
   loop: boolean
   touchable: boolean
@@ -42,6 +43,7 @@ const defaultProps = {
   autoPlay: 0,
   direction: 'horizontal',
   paginationColor: '#fff',
+  paginationBgColor: '#ddd',
   paginationVisible: false,
   loop: true,
   touchable: true,
@@ -415,7 +417,7 @@ export const Swiper = React.forwardRef<
 
       query.select(`#${(element as any).id}`) &&
         query.select(`#${(element as any).id}`).boundingClientRect()
-      query.exec(function (res: any) {
+      query.exec((res: any) => {
         resolve(res[0])
       })
     })
@@ -494,7 +496,7 @@ export const Swiper = React.forwardRef<
   }))
   return (
     <DataContext.Provider value={parent}>
-      <view
+      <div
         className={`${classes} ${className}`}
         ref={container}
         {...rest}
@@ -533,10 +535,11 @@ export const Swiper = React.forwardRef<
                       ? {
                           backgroundColor: propSwiper.paginationColor,
                         }
-                      : undefined
+                      : {
+                          backgroundColor: propSwiper.paginationBgColor,
+                        }
                   }
                   className={classNames({
-                    [`${b('pagination-item')}`]: true,
                     active: (active + childCount) % childCount === index,
                   })}
                   key={index}
@@ -547,7 +550,7 @@ export const Swiper = React.forwardRef<
         ) : (
           <div>{pageContent}</div>
         )}
-      </view>
+      </div>
     </DataContext.Provider>
   )
 })

diff --git a/src/packages/swiper/swiper.tsx b/src/packages/swiper/swiper.tsx
@@ -22,6 +22,7 @@ export interface SwiperProps {
   autoPlay: number | string
   direction: 'horizontal' | 'vertical'
   paginationColor: string
+  paginationBgColor: string
   paginationVisible: boolean
   loop: boolean
   touchable: boolean
@@ -42,6 +43,7 @@ const defaultProps = {
   autoPlay: 0,
   direction: 'horizontal',
   paginationColor: '#fff',
+  paginationBgColor: '#ddd',
   paginationVisible: false,
   loop: true,
   touchable: true,
@@ -327,7 +329,6 @@ export const Swiper = React.forwardRef<
   })
   const getStyle = (moveOffset = offset) => {
     const target = innerRef.current
-
     let _offset = 0
     if (!isCenter) {
       _offset = moveOffset
@@ -340,10 +341,6 @@ export const Swiper = React.forwardRef<
         moveOffset +
         (active === childCount - 1 && !props.loop ? -val / 2 : val / 2)
     }
-
-    target.style.transform = `translate3D${
-      !isVertical ? `(${_offset}px,0,0)` : `(0,${_offset}px,0)`
-    }`
     target.style.transitionDuration = `${
       _swiper.current.moving ? 0 : props.duration
     }ms`
@@ -353,6 +350,9 @@ export const Swiper = React.forwardRef<
     target.style[isVertical ? 'width' : 'height'] = `${
       isVertical ? width : height
     }px`
+    target.style.transform = `translate3D${
+      !isVertical ? `(${_offset}px,0,0)` : `(0,${_offset}px,0)`
+    }`
   }
 
   const onTouchStart = (e: TouchEvent) => {
@@ -518,10 +518,11 @@ export const Swiper = React.forwardRef<
                       ? {
                           backgroundColor: propSwiper.paginationColor,
                         }
-                      : undefined
+                      : {
+                          backgroundColor: propSwiper.paginationBgColor,
+                        }
                   }
                   className={classNames({
-                    [`${b('pagination-item')}`]: true,
                     active: (active + childCount) % childCount === index,
                   })}
                   key={index}