fix: 修复navbar高度问题 && swiper动画过度失效问题

taoyage · Jul 25, 2022 · b49761f · b49761f
1 parent 085788b
commit b49761f
Show file tree

Hide file tree

Showing 5 changed files with 9 additions and 5 deletions.
diff --git a/packages/nav-bar/index.tsx b/packages/nav-bar/index.tsx
@@ -11,6 +11,7 @@ export interface NavBarProps {
   leftArrow?: boolean;
   leftText?: string;
   border?: boolean;
+  style?: React.CSSProperties & Partial<Record<'--nav-bar-height' | '--border-bottom', string>>;
 }
 
 const NavBar: React.FC<NavBarProps> = React.memo((props) => {

diff --git a/packages/nav-bar/styles/index.scss b/packages/nav-bar/styles/index.scss
@@ -2,9 +2,10 @@ $class-prefix-nav-bar: 'ygm-nav-bar';
 
 .#{$class-prefix-nav-bar} {
   --nav-bar-height: 45px;
+  --border-bottom: none;
 
-  height: --nav-bar-height;
-  border-bottom: none;
+  height: var(--nav-bar-height);
+  border-bottom: var(--border-bottom);
   padding: 0 var(--ygm-padding-l);
   white-space: nowrap;
   display: flex;

diff --git a/packages/swiper/styles/swiper.scss b/packages/swiper/styles/swiper.scss
@@ -10,6 +10,7 @@
   touch-action: pan-y;
   border-radius: var(--border-radius);
   overflow: hidden;
+  z-index: 0;
 
   &-track {
     width: 100%;

diff --git a/packages/swiper/swiper.tsx b/packages/swiper/swiper.tsx
@@ -84,6 +84,7 @@ const Swiper = React.forwardRef<SwiperRef, SwiperProps>((props, ref) => {
                 transform: `translate3d(${position}%, 0px, 0px)`,
                 left: `-${index * 100}%`,
                 transition: getTransition(position),
+                WebkitTransition: getTransition(position),
               }}
             >
               {child}

diff --git a/stories/nav-bar/index.stories.tsx b/stories/nav-bar/index.stories.tsx
@@ -20,15 +20,15 @@ export const Basic = () => {
 
   return (
     <DemoWrap>
-      <DemoBlock title="基本用法">
+      <DemoBlock title="基本用法" style={{ padding: 0 }}>
         <NavBar leftArrow={false}>标题</NavBar>
       </DemoBlock>
-      <DemoBlock title="自定义返回按钮">
+      <DemoBlock title="自定义返回按钮" style={{ padding: 0 }}>
         <NavBar onBack={onBack} leftText="返回" leftArrow={true}>
           标题
         </NavBar>
       </DemoBlock>
-      <DemoBlock title="右侧按钮">
+      <DemoBlock title="右侧按钮" style={{ padding: 0 }}>
         <NavBar onBack={onBack} right={<SearchOutline />}>
           标题
         </NavBar>