refactor: swiper

lone2005 · Dec 12, 2022 · b5348bb · b5348bb
1 parent d260211
commit b5348bb
Show file tree

Hide file tree

Showing 8 changed files with 38 additions and 110 deletions.
diff --git a/src/packages/__VUE/swiper/demo.vue b/src/packages/__VUE/swiper/demo.vue
@@ -84,29 +84,6 @@
         </nut-swiper-item>
       </nut-swiper>
     </view>
-    <h2>{{ translate('horizontalCenter') }}</h2>
-    <view class="demo-box">
-      <nut-swiper :init-page="page4" :loop="false" width="280" height="150" :is-center="true" style="height: 150px">
-        <nut-swiper-item v-for="item in list" :key="item">
-          <img :src="item" alt="" />
-        </nut-swiper-item>
-      </nut-swiper>
-    </view>
-    <h2>{{ translate('verticalCenter') }}</h2>
-    <view class="demo-box vertical-center">
-      <nut-swiper
-        :init-page="page4"
-        :loop="false"
-        direction="vertical"
-        height="220"
-        :is-center="true"
-        style="height: 300px"
-      >
-        <nut-swiper-item v-for="item in list" :key="item">
-          <img :src="item" alt="" />
-        </nut-swiper-item>
-      </nut-swiper>
-    </view>
   </div>
 </template>
 

diff --git a/src/packages/__VUE/swiper/doc.en-US.md b/src/packages/__VUE/swiper/doc.en-US.md
@@ -266,7 +266,7 @@ Support dynamic addition / deletion of pictures
     right: 0;
     width: 46px;
     height: 22px;
-    background: rgba(0, 0, 0, 0.33);
+    background-color: rgba(0, 0, 0, 0.33);
     border-radius: 22px;
     text-align: center;
     color: #fff;
@@ -291,7 +291,7 @@ You can manually switch through `api` (`prev`, `next`)
         <img :src="item" alt="" />
       </nut-swiper-item>
     </nut-swiper>
-    <view class="nut-swiper-btns">
+    <view class="nut-swiper-btns" style="width: 100%;">
       <span class="nut-swiper-btns__left" @click="handlePrev">
         <nut-icon name='left'></nut-icon>
       </span>
@@ -338,7 +338,6 @@ You can manually switch through `api` (`prev`, `next`)
     }
   }
   .nut-swiper-btns{
-    width: 100%;
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
@@ -518,8 +517,8 @@ You can manually switch through `api` (`prev`, `next`)
 
 | Attribute                   | Description                                                        | Type           | Default      |
 | ---------------------- | ----------------------------------------------------------- | -------------- | ----------- |
-| width                   | Width of rotation card           | Number、String        | window.innerWidth       |
-| height                | Height of rotation card                                                    | String、Number | 0        |
+| width                   | Width of rotation card           | Number、String        | `auto`       |
+| height                | Height of rotation card                                                    | String、Number | `auto`        |
 | direction               | Rotation direction, optional value：`horizontal`,`vertical`     | String | 'horizontal'         |
 | pagination-visible          | Is the paging indicator displayed                                           | Boolean         | false           |
 | pagination-color         | The color selected by the pagination indicator                                              | String  | '#fff'           |

diff --git a/src/packages/__VUE/swiper/doc.md b/src/packages/__VUE/swiper/doc.md
@@ -266,7 +266,7 @@ app.use(SwiperItem);
     right: 0;
     width: 46px;
     height: 22px;
-    background: rgba(0, 0, 0, 0.33);
+    background-color: rgba(0, 0, 0, 0.33);
     border-radius: 22px;
     text-align: center;
     color: #fff;
@@ -291,7 +291,7 @@ app.use(SwiperItem);
         <img :src="item" alt="" />
       </nut-swiper-item>
     </nut-swiper>
-    <view class="nut-swiper-btns">
+    <view class="nut-swiper-btns" style="width: 100%;">
       <span class="nut-swiper-btns__left" @click="handlePrev">
         <nut-icon name='left'></nut-icon>
       </span>
@@ -338,7 +338,6 @@ app.use(SwiperItem);
     }
   }
   .nut-swiper-btns{
-    width: 100%;
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
@@ -519,8 +518,8 @@ app.use(SwiperItem);
 
 | 参数                   | 说明                                                        | 类型           | 默认值      |
 | ---------------------- | ----------------------------------------------------------- | -------------- | ----------- |
-| width                   | 轮播卡片的宽度           | Number、String        | window.innerWidth       |
-| height                | 轮播卡片的高度                                                    | String、Number | 0        |
+| width                   | 轮播卡片的宽度           | Number、String        | `auto`       |
+| height                | 轮播卡片的高度                                                    | String、Number | `auto`        |
 | direction               | 轮播方向,可选值`horizontal`,`vertical`     | String | 'horizontal'         |
 | pagination-visible          | 分页指示器是否展示                                              | Boolean         | false           |
 | pagination-color         | 分页指示器选中的颜色                                              | String  | '#fff'           |

diff --git a/src/packages/__VUE/swiper/index.taro.vue b/src/packages/__VUE/swiper/index.taro.vue
@@ -96,10 +96,6 @@ export default create({
     isStopPropagation: {
       type: Boolean,
       default: true
-    },
-    isCenter: {
-      type: Boolean,
-      default: false
     }
   },
   emits: ['change'],
@@ -175,14 +171,7 @@ export default create({
 
     const getStyle = () => {
       let offset = 0;
-      if (!props.isCenter) {
-        offset = state.offset;
-      } else {
-        let val = isVertical.value
-          ? (state.rect as DOMRect).height - size.value
-          : (state.rect as DOMRect).width - size.value;
-        offset = state.offset + (state.active === childCount.value - 1 ? -val / 2 : val / 2);
-      }
+      offset = state.offset;
       state.style = {
         transitionDuration: `${state.moving ? 0 : props.duration}ms`,
         transform: `translate${isVertical.value ? 'Y' : 'X'}(${offset}px)`,
@@ -293,30 +282,27 @@ export default create({
       clearTimeout(state.autoplayTimer);
     };
 
-    const prev = () => {
+    const jump = (pace: number) => {
       resettPosition();
       touch.reset();
 
       requestAniFrame(() => {
-        state.moving = false;
-        move({
-          pace: -1,
-          isEmit: true
+        requestAniFrame(() => {
+          state.moving = false;
+          move({
+            pace,
+            isEmit: true
+          });
         });
       });
     };
 
-    const next = () => {
-      resettPosition();
-      touch.reset();
+    const prev = () => {
+      jump(-1);
+    };
 
-      requestAniFrame(() => {
-        state.moving = false;
-        move({
-          pace: 1,
-          isEmit: true
-        });
-      });
+    const next = () => {
+      jump(1);
     };
 
     const to = (index: number) => {

diff --git a/src/packages/__VUE/swiper/index.vue b/src/packages/__VUE/swiper/index.vue
@@ -171,14 +171,7 @@ export default create({
 
     const getStyle = () => {
       let offset = 0;
-      if (!props.isCenter) {
-        offset = state.offset;
-      } else {
-        let val = isVertical.value
-          ? (state.rect as DOMRect).height - size.value
-          : (state.rect as DOMRect).width - size.value;
-        offset = state.offset + (state.active === childCount.value - 1 ? -val / 2 : val / 2);
-      }
+      offset = state.offset;
       state.style = {
         transitionDuration: `${state.moving ? 0 : props.duration}ms`,
         transform: `translate${isVertical.value ? 'Y' : 'X'}(${offset}px)`,
@@ -291,30 +284,27 @@ export default create({
       clearTimeout(state.autoplayTimer);
     };
 
-    const prev = () => {
+    const jump = (pace: number) => {
       resettPosition();
       touch.reset();
 
       requestAniFrame(() => {
-        state.moving = false;
-        move({
-          pace: -1,
-          isEmit: true
+        requestAniFrame(() => {
+          state.moving = false;
+          move({
+            pace,
+            isEmit: true
+          });
         });
       });
     };
 
-    const next = () => {
-      resettPosition();
-      touch.reset();
+    const prev = () => {
+      jump(-1);
+    };
 
-      requestAniFrame(() => {
-        state.moving = false;
-        move({
-          pace: 1,
-          isEmit: true
-        });
-      });
+    const next = () => {
+      jump(1);
     };
 
     const to = (index: number) => {

diff --git a/src/packages/__VUE/swiperitem/index.taro.vue b/src/packages/__VUE/swiperitem/index.taro.vue
@@ -5,7 +5,7 @@
 </template>
 
 <script lang="ts">
-import { computed, reactive, inject, getCurrentInstance, onUnmounted } from 'vue';
+import { computed, reactive, inject, getCurrentInstance, onUnmounted, ComputedRef } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 import { useExpose } from '@/packages/utils/useExpose/index';
 const { create, componentName } = createComponent('swiper-item');
@@ -29,7 +29,7 @@ export default create({
       };
     });
 
-    const style = computed(() => {
+    const style: ComputedRef = computed(() => {
       const style: IStyle = {};
       const direction = parent?.props.direction;
       if (parent?.size.value) {

diff --git a/src/packages/__VUE/swiperitem/index.vue b/src/packages/__VUE/swiperitem/index.vue
@@ -5,7 +5,7 @@
 </template>
 
 <script lang="ts">
-import { computed, reactive, inject, getCurrentInstance, onUnmounted } from 'vue';
+import { computed, reactive, inject, getCurrentInstance, onUnmounted, ComputedRef } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 import { useExpose } from '@/packages/utils/useExpose/index';
 const { create, componentName } = createComponent('swiper-item');
@@ -29,7 +29,7 @@ export default create({
       };
     });
 
-    const style = computed(() => {
+    const style: ComputedRef = computed(() => {
       const style: IStyle = {};
       const direction = parent?.props.direction;
       if (parent?.size.value) {

diff --git a/src/sites/mobile-taro/vue/src/exhibition/pages/swiper/index.vue b/src/sites/mobile-taro/vue/src/exhibition/pages/swiper/index.vue
@@ -86,29 +86,6 @@
         </nut-swiper-item>
       </nut-swiper>
     </view>
-    <h2>水平居中展示</h2>
-    <view class="demo-box">
-      <nut-swiper :init-page="page4" :loop="false" width="280" height="150" :is-center="true" style="height: 150px">
-        <nut-swiper-item v-for="item in list" :key="item">
-          <img :src="item" alt="" />
-        </nut-swiper-item>
-      </nut-swiper>
-    </view>
-    <h2>垂直居中展示</h2>
-    <view class="demo-box vertical-center">
-      <nut-swiper
-        :init-page="page4"
-        :loop="false"
-        direction="vertical"
-        height="220"
-        :is-center="true"
-        style="height: 300px"
-      >
-        <nut-swiper-item v-for="item in list" :key="item">
-          <img :src="item" alt="" />
-        </nut-swiper-item>
-      </nut-swiper>
-    </view>
   </div>
 </template>