feat(Swiper): 新增重新计算尺寸方法，文档修改 (#649)

Co-authored-by: lkjh3214 <13121007159@163.com>

src/packages/swiper/demo.scss

@@ -1,7 +1,6 @@
 .demo-box {
   position: relative;
   .nut-swiper {
-    height: 150px;
     img {
       width: 100%;
       height: 100%;
@@ -39,6 +38,9 @@
   }
 }
 .vertical-center {
+  .nut-swiper {
+    height: 150px;
+  }
   .nut-swiper__pagination-vertical {
     i {
       width: 6px;

src/packages/swiper/demo.taro.tsx

@@ -152,7 +152,7 @@ const SwiperDemo = () => {
 
         <h2>{translated.size}</h2>
         <div className="demo-box" style={{ height: 150 }}>
-          <Swiper initPage={initPage4} width="300" loop={false}>
+          <Swiper initPage={initPage4} height={height} width="300" loop={false}>
             {list.map((item) => {
               return (
                 <SwiperItem key={item}>
@@ -166,6 +166,7 @@ const SwiperDemo = () => {
         <div className="demo-box" style={{ height: 150 }}>
           <Swiper
             loop
+            height={height}
             initPage={initPage5}
             onChange={(e) => setCurrent(e + 1)}
             pageContent={<div className="page"> {current}/4 </div>}
@@ -182,6 +183,7 @@ const SwiperDemo = () => {
         <h2>{translated.btns}</h2>
         <div className="demo-box" style={{ height: 150 }}>
           <Swiper
+            height={height}
             ref={swiperRef}
             loop
             initPage={initPage6}

src/packages/swiper/demo.tsx

@@ -150,7 +150,7 @@ const SwiperDemo = () => {
 
       <h2>{translated.size}</h2>
       <div className="demo-box" style={{ height: 150 }}>
-        <Swiper initPage={initPage4} width="300" loop={false}>
+        <Swiper initPage={initPage4} width="300" height={height} loop={false}>
           {list.map((item) => {
             return (
               <SwiperItem key={item}>
@@ -163,6 +163,7 @@ const SwiperDemo = () => {
       <h2>{translated.indicator}</h2>
       <div className="demo-box" style={{ height: 150 }}>
         <Swiper
+          height={height}
           loop
           initPage={initPage5}
           onChange={(e) => setCurrent(e + 1)}
@@ -181,6 +182,7 @@ const SwiperDemo = () => {
       <div className="demo-box" style={{ height: 150 }}>
         <Swiper
           ref={swiperRef}
+          height={height}
           loop
           initPage={initPage6}
           onChange={(e) => setCurrent2(e + 1)}
@@ -210,7 +212,7 @@ const SwiperDemo = () => {
           initPage={initPage7}
           direction="vertical"
           autoPlay="3000"
-          height="150"
+          height={height}
           paginationVisible
         >
           {list.map((item) => {
@@ -228,7 +230,7 @@ const SwiperDemo = () => {
           loop={false}
           initPage={initPage8}
           autoPlay="0"
-          height="150"
+          height={height}
           paginationVisible
           width="280"
           isCenter

src/packages/swiper/doc.en-US.md

@@ -502,6 +502,7 @@ export default App;
 | prev   | Switch to previous page   | -            |
 | next   | Switch to next page    | -            |
 | to     | Switch to the specified rotation | index:number |
+| resize`1.4.7`     | This method can be called to trigger redraw when the size of the outer element or the display state of the component changes | - |
 
 ## Theming
 

src/packages/swiper/doc.md

@@ -501,6 +501,7 @@ export default App;
 | prev   | 切换到上一页   | -            |
 | next   | 切换到下一页   | -            |
 | to     | 切换到指定轮播 | index:number |
+| resize`1.4.7`     | 外层元素大小或组件显示状态变化时，可以调用此方法来触发重绘 | - |
 
 ## 主题定制
 

src/packages/swiper/doc.taro.md

@@ -500,6 +500,7 @@ export default App;
 | prev   | 切换到上一页   | -            |
 | next   | 切换到下一页   | -            |
 | to     | 切换到指定轮播 | index:number |
+| resize`1.4.7`     | 外层元素大小或组件显示状态变化时，可以调用此方法来触发重绘 | - |
 
 ## 主题定制
 

src/packages/swiper/swiper.taro.tsx

@@ -215,7 +215,9 @@ export const Swiper = React.forwardRef<
       })
     })
   }
-
+  const resize = () => {
+    init(active)
+  }
   // 切换方法
   const move = ({
     pace = 0,
@@ -493,6 +495,7 @@ export const Swiper = React.forwardRef<
     to,
     next,
     prev,
+    resize,
   }))
   return (
     <DataContext.Provider value={parent}>

src/packages/swiper/swiper.tsx

@@ -214,7 +214,9 @@ export const Swiper = React.forwardRef<
       })
     })
   }
-
+  const resize = () => {
+    init(active)
+  }
   // 切换方法
   const move = ({
     pace = 0,
@@ -487,6 +489,7 @@ export const Swiper = React.forwardRef<
     to,
     next,
     prev,
+    resize,
   }))
   return (
     <DataContext.Provider value={parent}>