fix(taro-components): 修复swiper样式, fix #6159

NervJS · May 2, 2020 · a037649 · a037649
1 parent c81a1d5
commit a037649
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 66 deletions.
diff --git a/packages/taro-components/src/components/swiper/style/index.scss b/packages/taro-components/src/components/swiper/style/index.scss
@@ -1,9 +1,13 @@
+taro-swiper-core {
+  display: block;
+  height: 150px;
+}
 .swiper-container {
-    height: 150px;
+  height: 100%;
 }
 .swiper-pagination {
-    font-size: 0;
+  font-size: 0;
 }
 .swiper-pagination-bullet {
-    opacity: 1
+  opacity: 1
 }
diff --git a/packages/taro-components/src/components/swiper/style/swiper.scss b/packages/taro-components/src/components/swiper/style/swiper.scss
diff --git a/packages/taro-components/src/components/swiper/swiper.tsx b/packages/taro-components/src/components/swiper/swiper.tsx
@@ -1,5 +1,5 @@
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-import { Component, h, ComponentInterface, Prop, Event, EventEmitter, Watch } from '@stencil/core'
+import { Component, h, ComponentInterface, Prop, Event, EventEmitter, Watch, Host } from '@stencil/core'
 import Swipers from 'swiper'
 import classNames from 'classnames'
 
@@ -197,18 +197,20 @@ export class Swiper implements ComponentInterface {
     }
 
     return (
-      <div class={cls} style={style}>
-        <style type='text/css'>
-          {`
-            .taro-swiper-${this._id} .swiper-pagination-bullet { background: ${indicatorColor} }
-            .taro-swiper-${this._id} .swiper-pagination-bullet-active { background: ${indicatorActiveColor} }
-          `}
-        </style>
-        <div class='swiper-wrapper'>
-          <slot />
+      <Host>
+        <div class={cls} style={style}>
+          <style type='text/css'>
+            {`
+              .taro-swiper-${this._id} .swiper-pagination-bullet { background: ${indicatorColor} }
+              .taro-swiper-${this._id} .swiper-pagination-bullet-active { background: ${indicatorActiveColor} }
+            `}
+          </style>
+          <div class='swiper-wrapper'>
+            <slot />
+          </div>
+          <div class={paginationCls} />
         </div>
-        <div class={paginationCls} />
-      </div>
+      </Host>
     )
   }
 }