feat(Carousel): 增加竖向滚动功能 (#704)

uiwjs · Mar 22, 2022 · 8706470 · 8706470
1 parent 665e18f
commit 8706470
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 23 deletions.
diff --git a/packages/react-carousel/README.md b/packages/react-carousel/README.md
@@ -24,20 +24,37 @@ import { Carousel } from 'uiw';
 
 function Demo() {
   return (
-    <Carousel>
-      <div style={{ height: '100%', background: '#1EABCD' }}>
-        <span>1</span>
-      </div>
-      <div style={{ height: '100%',  background: '#393b46' }}>
-        <span>2</span>
-      </div>
-      <div style={{ height: '100%',  background: '#008EF0' }}>
-        <span>3</span>
-      </div>
-      <div style={{ height: '100%',  background: '#393E48' }}>
-        <span>4</span>
-      </div>
-    </Carousel>
+    <div style={{ display:'flex' }}>
+      <Carousel>
+        <div style={{ height: '100%', background: '#1EABCD' }}>
+          <span>1</span>
+        </div>
+        <div style={{ height: '100%',  background: '#393b46' }}>
+          <span>2</span>
+        </div>
+        <div style={{ height: '100%',  background: '#008EF0' }}>
+          <span>3</span>
+        </div>
+        <div style={{ height: '100%',  background: '#393E48' }}>
+          <span>4</span>
+        </div>
+      </Carousel>
+      <span style={{marginLeft:10}}/>
+      <Carousel direction="vertical" >
+        <div style={{ height: '100%', background: '#1EABCD' }}>
+          <span>1</span>
+        </div>
+        <div style={{ height: '100%',  background: '#393b46' }}>
+          <span>2</span>
+        </div>
+        <div style={{ height: '100%',  background: '#008EF0' }}>
+          <span>3</span>
+        </div>
+        <div style={{ height: '100%',  background: '#393E48' }}>
+          <span>4</span>
+        </div>
+      </Carousel>
+    </div>
   );
 }
 
@@ -136,7 +153,7 @@ ReactDOM.render(<Demo />, _mount_);
 | autoPlay | 是否自动播放 | boolean | true |
 | afterChange | 切换面板前的回调 | (current) => void | - |
 | beforeChange | 切换面板后的回调 | (current) => void | - |
-
+| direction | 滚动方位`horizontal`横向，`vertical`竖向 | horizontal \| vertical | horizontal |
 
 ### ref
 

diff --git a/packages/react-carousel/src/index.tsx b/packages/react-carousel/src/index.tsx
@@ -9,6 +9,7 @@ export interface CarouselProps extends IProps, HTMLDivProps {
   palyTime?: number;
   scrollTime?: number;
   autoPlay?: boolean;
+  direction?: 'horizontal' | 'vertical';
   afterChange?: (current: number) => void;
   beforeChange?: (current: number) => void;
 }
@@ -23,6 +24,7 @@ export interface CarouselRef {
 function Carousel(props: CarouselProps, ref: React.ForwardedRef<CarouselRef>) {
   const {
     position = 0,
+    direction = 'horizontal',
     width = 400,
     height = 200,
     palyTime = 2000,
@@ -110,15 +112,28 @@ function Carousel(props: CarouselProps, ref: React.ForwardedRef<CarouselRef>) {
     return <div style={{ width, height, ...style }}>{child}</div>;
   });
 
+  const innerStyle = useMemo(() => {
+    const style = { transform: '', display: '' };
+    switch (direction) {
+      case 'horizontal':
+        style.transform = `translate3d(${-(currentPosition * width)}px, 0px, 0px)`;
+        style.display = 'flex';
+        break;
+      case 'vertical':
+        style.transform = `translate3d(0px, ${-(currentPosition * height)}px, 0px)`;
+        style.display = 'block';
+        break;
+      default:
+        break;
+    }
+    return style;
+  }, [direction, currentPosition, width, height]);
+
   return (
     <div className={cls} style={{ width, height }}>
       <div
         className={`${cls}-content`}
-        style={{
-          width: width * childCount,
-          transform: `translate3d(${-(currentPosition * width)}px, 0px, 0px)`,
-          transition: transitionInner,
-        }}
+        style={{ width: width * childCount, transition: transitionInner, ...innerStyle }}
       >
         {childrens}
         <div style={{ width, height, ...style }}>{childrens?.[0]}</div>

diff --git a/packages/react-carousel/src/style/index.less b/packages/react-carousel/src/style/index.less
@@ -5,9 +5,6 @@
 
   &-content {
     height: 200px;
-    // transform: translate3d();
-    display: flex;
-    flex-direction: row;
     transition: 0.6s ease-in-out;
   }
 }