refactor(swiper): optimize code

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

@@ -34,7 +34,7 @@ app.use(SwiperItem);
       <img src="https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg" alt="" />
     </nut-swiper-item>
     <nut-swiper-item>
-      <img src="https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg'" alt="" />
+      <img src="https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg" alt="" />
     </nut-swiper-item>
     <nut-swiper-item>
       <img src="https://storage.360buyimg.com/jdc-article/welcomenutui.jpg" alt="" />
@@ -177,7 +177,7 @@ Support dynamic addition / deletion of pictures
       <img src="https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg" alt="" />
     </nut-swiper-item>
     <nut-swiper-item>
-      <img src="https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg'" alt="" />
+      <img src="https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg" alt="" />
     </nut-swiper-item>
     <nut-swiper-item>
       <img src="https://storage.360buyimg.com/jdc-article/welcomenutui.jpg" alt="" />
@@ -224,7 +224,7 @@ Support dynamic addition / deletion of pictures
         <img src="https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg" alt="" />
       </nut-swiper-item>
       <nut-swiper-item>
-        <img src="https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg'" alt="" />
+        <img src="https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg" alt="" />
       </nut-swiper-item>
       <nut-swiper-item>
         <img src="https://storage.360buyimg.com/jdc-article/welcomenutui.jpg" alt="" />
@@ -372,7 +372,7 @@ You can manually switch through `api` (`prev`, `next`)
       <img src="https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg" alt="" />
     </nut-swiper-item>
     <nut-swiper-item>
-      <img src="https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg'" alt="" />
+      <img src="https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg" alt="" />
     </nut-swiper-item>
     <nut-swiper-item>
       <img src="https://storage.360buyimg.com/jdc-article/welcomenutui.jpg" alt="" />
@@ -528,8 +528,8 @@ You can manually switch through `api` (`prev`, `next`)
 | auto-play | Automatic rotation duration, 0 means no automatic rotation                                          | Number、String        | 0        |
 | init-page               | Initialize index value                   | Number、String         | 0    |
 | touchable             | if touchable to slide                                                      | Boolean         | true          |
-| is-preventDefault                  | Disable default events during sliding                                              | Boolean  | true           |
-| is-stopPropagation               | Is bubbling prohibited during sliding                    | Boolean         | true    |
+| is-prevent-default                  | Disable default events during sliding                                              | Boolean  | true           |
+| is-stop-propagation               | Is bubbling prohibited during sliding                    | Boolean         | true    |
 | is-center| The corresponding `width` and `height` must be passed to determine whether to display in the middle`  | Boolean   | false    |
 
 
@@ -540,6 +540,12 @@ You can manually switch through `api` (`prev`, `next`)
 | ---------------- | ---------------------- | ------------ |
 | change            | Callback after sliding        |  Current index value |
 
+### Slots
+
+| Name | Description       |
+| ------ | ---------- |
+| page  | Custom Pager |
+
 
 
 ### Swipe Methods

src/packages/__VUE/swiper/doc.md

@@ -34,7 +34,7 @@ app.use(SwiperItem);
       <img src="https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg" alt="" />
     </nut-swiper-item>
     <nut-swiper-item>
-      <img src="https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg'" alt="" />
+      <img src="https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg" alt="" />
     </nut-swiper-item>
     <nut-swiper-item>
       <img src="https://storage.360buyimg.com/jdc-article/welcomenutui.jpg" alt="" />
@@ -177,7 +177,7 @@ app.use(SwiperItem);
       <img src="https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg" alt="" />
     </nut-swiper-item>
     <nut-swiper-item>
-      <img src="https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg'" alt="" />
+      <img src="https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg" alt="" />
     </nut-swiper-item>
     <nut-swiper-item>
       <img src="https://storage.360buyimg.com/jdc-article/welcomenutui.jpg" alt="" />
@@ -224,7 +224,7 @@ app.use(SwiperItem);
         <img src="https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg" alt="" />
       </nut-swiper-item>
       <nut-swiper-item>
-        <img src="https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg'" alt="" />
+        <img src="https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg" alt="" />
       </nut-swiper-item>
       <nut-swiper-item>
         <img src="https://storage.360buyimg.com/jdc-article/welcomenutui.jpg" alt="" />
@@ -372,7 +372,7 @@ app.use(SwiperItem);
       <img src="https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg" alt="" />
     </nut-swiper-item>
     <nut-swiper-item>
-      <img src="https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg'" alt="" />
+      <img src="https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg" alt="" />
     </nut-swiper-item>
     <nut-swiper-item>
       <img src="https://storage.360buyimg.com/jdc-article/welcomenutui.jpg" alt="" />
@@ -529,8 +529,8 @@ app.use(SwiperItem);
 | auto-play | 自动轮播时长，0表示不会自动轮播                                          | Number、String        | 0        |
 | init-page               | 初始化索引值                   | Number、String         | 0    |
 | touchable             | 是否可触摸滑动                                                      | Boolean         | true          |
-| is-preventDefault                  | 滑动过程中是否禁用默认事件                                              | Boolean  | true           |
-| is-stopPropagation               | 滑动过程中是否禁止冒泡                    | Boolean         | true    |
+| is-prevent-default                  | 滑动过程中是否禁用默认事件                                              | Boolean  | true           |
+| is-stop-propagation               | 滑动过程中是否禁止冒泡                    | Boolean         | true    |
 | is-center               | 是否居中展示，必须传对应的`width` 和 `height`                    | Boolean         | false    |
 
 
@@ -541,6 +541,12 @@ app.use(SwiperItem);
 | ---------------- | ---------------------- | ------------ |
 | change            | 滑动之后的回调         | 当前索引值index |
 
+### Slots
+
+| 名称 | 说明       |
+| ------ | ---------- |
+| page  | 自定义分页器 |
+
 
 
 ### Swipe 方法

src/packages/__VUE/swiper/index.taro.vue

@@ -9,23 +9,11 @@
     @touchcancel="onTouchEnd"
     :catch-move="isPreventDefault"
   >
-    <view
-      :class="{
-        [`${componentName}-inner`]: true,
-        [`${componentName}-vertical`]: isVertical
-      }"
-      :style="state.style"
-    >
+    <view :class="classesInner" :style="state.style">
       <slot></slot>
     </view>
     <slot name="page"></slot>
-    <view
-      :class="{
-        [`${componentName}-pagination`]: true,
-        [`${componentName}-pagination-vertical`]: isVertical
-      }"
-      v-if="paginationVisible && !slots.page"
-    >
+    <view :class="classesPagination" v-if="paginationVisible && !$slots.page">
       <i
         :style="{
           backgroundColor: activePagination === index ? paginationColor : '#ddd'
@@ -52,9 +40,11 @@ import {
   VNode
 } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-import { useTouch } from './use-touch';
+import { useTouch } from '@/packages/utils/useTouch/index';
 import { useTaroRect } from '@/packages/utils/useTaroRect';
 import { useExpose } from '@/packages/utils/useExpose/index';
+import requestAniFrame from '@/packages/utils/raf';
+import { clamp } from '@/packages/utils/util';
 import Taro, { eventCenter, getCurrentInstance } from '@tarojs/taro';
 const { create, componentName } = createComponent('swiper');
 export default create({
@@ -68,7 +58,7 @@ export default create({
       default: 0
     },
     direction: {
-      type: [String],
+      type: String,
       default: 'horizontal' //horizontal and vertical
     },
     paginationVisible: {
@@ -143,12 +133,28 @@ export default create({
 
     const isVertical = computed(() => props.direction === 'vertical');
 
+    const classesInner = computed(() => {
+      const prefixCls = componentName;
+      return {
+        [`${prefixCls}-inner`]: true,
+        [`${prefixCls}-vertical`]: isVertical.value
+      };
+    });
+
+    const classesPagination = computed(() => {
+      const prefixCls = componentName;
+      return {
+        [`${prefixCls}-pagination`]: true,
+        [`${prefixCls}-pagination-vertical`]: isVertical.value
+      };
+    });
+
     const delTa = computed(() => {
-      return isVertical.value ? touch.state.deltaY : touch.state.deltaX;
+      return isVertical.value ? touch.deltaY.value : touch.deltaX.value;
     });
 
     const isCorrectDirection = computed(() => {
-      return touch.state.direction === props.direction;
+      return touch.direction.value === props.direction;
     });
 
     const childCount = computed(() => state.children.length);
@@ -187,26 +193,27 @@ export default create({
 
     const relation = (child: ComponentInternalInstance) => {
       let children = [] as VNode[];
+      const childrenVNodeLen = state.childrenVNode.length;
       let slot = slots?.default?.() as VNode[];
       slot = slot.filter((item: VNode) => item.children && Array.isArray(item.children));
       slot.forEach((item: VNode) => {
         children = children.concat(item.children as VNode[]);
       });
-      if (!state.childrenVNode.length) {
+      if (!childrenVNodeLen) {
         state.childrenVNode = children.slice();
         child.proxy && state.children.push(child.proxy);
       } else {
-        if (state.childrenVNode.length > children.length) {
+        if (childrenVNodeLen > children.length) {
           state.children = state.children.filter((item: ComponentPublicInstance) => child.proxy !== item);
-        } else if (state.childrenVNode.length < children.length) {
-          for (let i = 0; i < state.childrenVNode.length; i++) {
+        } else if (childrenVNodeLen < children.length) {
+          for (let i = 0; i < childrenVNodeLen; i++) {
             if ((children[i] as VNode).key !== (state.childrenVNode[i] as VNode).key) {
               child.proxy && state.children.splice(i, 0, child.proxy);
               child.vnode && state.childrenVNode.splice(i, 0, child.vnode);
               break;
             }
           }
-          if (state.childrenVNode.length !== children.length) {
+          if (childrenVNodeLen !== children.length) {
             child.proxy && state.children.push(child.proxy);
             child.vnode && state.childrenVNode.push(child.vnode);
           }
@@ -217,14 +224,6 @@ export default create({
       }
     };
 
-    const range = (num: number, min: number, max: number) => {
-      return Math.min(Math.max(num, min), max);
-    };
-
-    const requestFrame = (fn: FrameRequestCallback) => {
-      requestAnimationFrame.call(null, fn);
-    };
-
     const getOffset = (active: number, offset = 0) => {
       let currentPosition = active * size.value;
       if (!props.loop) {
@@ -233,7 +232,7 @@ export default create({
 
       let targetOffset = offset - currentPosition;
       if (!props.loop) {
-        targetOffset = range(targetOffset, minOffset.value, 0);
+        targetOffset = clamp(targetOffset, minOffset.value, 0);
       }
 
       return targetOffset;
@@ -243,9 +242,9 @@ export default create({
       const { active } = state;
       if (pace) {
         if (props.loop) {
-          return range(active + pace, -1, childCount.value);
+          return clamp(active + pace, -1, childCount.value);
         }
-        return range(active + pace, 0, childCount.value - 1);
+        return clamp(active + pace, 0, childCount.value - 1);
       }
       return active;
     };
@@ -298,13 +297,11 @@ export default create({
       resettPosition();
       touch.reset();
 
-      requestFrame(() => {
-        requestFrame(() => {
-          state.moving = false;
-          move({
-            pace: -1,
-            isEmit: true
-          });
+      requestAniFrame(() => {
+        state.moving = false;
+        move({
+          pace: -1,
+          isEmit: true
         });
       });
     };
@@ -313,13 +310,11 @@ export default create({
       resettPosition();
       touch.reset();
 
-      requestFrame(() => {
-        requestFrame(() => {
-          state.moving = false;
-          move({
-            pace: 1,
-            isEmit: true
-          });
+      requestAniFrame(() => {
+        state.moving = false;
+        move({
+          pace: 1,
+          isEmit: true
         });
       });
     };
@@ -329,19 +324,17 @@ export default create({
 
       touch.reset();
 
-      requestFrame(() => {
-        requestFrame(() => {
-          state.moving = false;
-          let targetIndex;
-          if (props.loop && childCount.value === index) {
-            targetIndex = state.active === 0 ? 0 : index;
-          } else {
-            targetIndex = index % childCount.value;
-          }
-          move({
-            pace: targetIndex - state.active,
-            isEmit: true
-          });
+      requestAniFrame(() => {
+        state.moving = false;
+        let targetIndex;
+        if (props.loop && childCount.value === index) {
+          targetIndex = state.active === 0 ? 0 : index;
+        } else {
+          targetIndex = index % childCount.value;
+        }
+        move({
+          pace: targetIndex - state.active,
+          isEmit: true
         });
       });
     };
@@ -400,7 +393,7 @@ export default create({
 
       if (isShouldMove && isCorrectDirection.value) {
         let pace = 0;
-        const offset = isVertical.value ? touch.state.offsetY : touch.state.offsetX;
+        const offset = isVertical.value ? touch.offsetY.value : touch.offsetX.value;
         if (props.loop) {
           pace = offset > 0 ? (delTa.value > 0 ? -1 : 1) : 0;
         } else {
@@ -475,10 +468,9 @@ export default create({
       state,
       refRandomId,
       classes,
+      classesPagination,
+      classesInner,
       container,
-      componentName,
-      isVertical,
-      slots,
       activePagination,
       onTouchStart,
       onTouchMove,

src/packages/__VUE/swiper/index.vue

@@ -7,23 +7,11 @@
     @touchend="onTouchEnd"
     @touchcancel="onTouchEnd"
   >
-    <view
-      :class="{
-        [`${componentName}-inner`]: true,
-        [`${componentName}-vertical`]: isVertical
-      }"
-      :style="state.style"
-    >
+    <view :class="classesInner" :style="state.style">
       <slot></slot>
     </view>
     <slot name="page"></slot>
-    <view
-      :class="{
-        [`${componentName}-pagination`]: true,
-        [`${componentName}-pagination-vertical`]: isVertical
-      }"
-      v-if="paginationVisible && !slots.page"
-    >
+    <view :class="classesPagination" v-if="paginationVisible && !$slots.page">
       <i
         :style="{
           backgroundColor: activePagination === index ? paginationColor : '#ddd'
@@ -51,8 +39,10 @@ import {
   VNode
 } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-import { useTouch } from './use-touch';
+import { useTouch } from '@/packages/utils/useTouch/index';
 import { useExpose } from '@/packages/utils/useExpose/index';
+import { clamp } from '@/packages/utils/util';
+import requestAniFrame from '@/packages/utils/raf';
 const { create, componentName } = createComponent('swiper');
 export default create({
   props: {
@@ -65,7 +55,7 @@ export default create({
       default: 0
     },
     direction: {
-      type: [String],
+      type: String,
       default: 'horizontal' //horizontal and vertical
     },
     paginationVisible: {
@@ -139,12 +129,28 @@ export default create({
 
     const isVertical = computed(() => props.direction === 'vertical');
 
+    const classesInner = computed(() => {
+      const prefixCls = componentName;
+      return {
+        [`${prefixCls}-inner`]: true,
+        [`${prefixCls}-vertical`]: isVertical.value
+      };
+    });
+
+    const classesPagination = computed(() => {
+      const prefixCls = componentName;
+      return {
+        [`${prefixCls}-pagination`]: true,
+        [`${prefixCls}-pagination-vertical`]: isVertical.value
+      };
+    });
+
     const delTa = computed(() => {
-      return isVertical.value ? touch.state.deltaY : touch.state.deltaX;
+      return isVertical.value ? touch.deltaY.value : touch.deltaX.value;
     });
 
     const isCorrectDirection = computed(() => {
-      return touch.state.direction === props.direction;
+      return touch.direction.value === props.direction;
     });
 
     const childCount = computed(() => state.children.length);
@@ -183,26 +189,27 @@ export default create({
 
     const relation = (child: ComponentInternalInstance) => {
       let children = [] as VNode[];
+      const childrenVNodeLen = state.childrenVNode.length;
       let slot = slots?.default?.() as VNode[];
       slot = slot.filter((item: VNode) => item.children && Array.isArray(item.children));
       slot.forEach((item: VNode) => {
         children = children.concat(item.children as VNode[]);
       });
-      if (!state.childrenVNode.length) {
+      if (!childrenVNodeLen) {
         state.childrenVNode = children.slice();
         child.proxy && state.children.push(child.proxy);
       } else {
-        if (state.childrenVNode.length > children.length) {
+        if (childrenVNodeLen > children.length) {
           state.children = state.children.filter((item: ComponentPublicInstance) => child.proxy !== item);
-        } else if (state.childrenVNode.length < children.length) {
-          for (let i = 0; i < state.childrenVNode.length; i++) {
+        } else if (childrenVNodeLen < children.length) {
+          for (let i = 0; i < childrenVNodeLen; i++) {
             if ((children[i] as VNode).key !== (state.childrenVNode[i] as VNode).key) {
               child.proxy && state.children.splice(i, 0, child.proxy);
               child.vnode && state.childrenVNode.splice(i, 0, child.vnode);
               break;
             }
           }
-          if (state.childrenVNode.length !== children.length) {
+          if (childrenVNodeLen !== children.length) {
             child.proxy && state.children.push(child.proxy);
             child.vnode && state.childrenVNode.push(child.vnode);
           }
@@ -213,14 +220,6 @@ export default create({
       }
     };
 
-    const range = (num: number, min: number, max: number) => {
-      return Math.min(Math.max(num, min), max);
-    };
-
-    const requestFrame = (fn: FrameRequestCallback) => {
-      window.requestAnimationFrame.call(window, fn);
-    };
-
     const getOffset = (active: number, offset = 0) => {
       let currentPosition = active * size.value;
       if (!props.loop) {
@@ -229,7 +228,7 @@ export default create({
 
       let targetOffset = offset - currentPosition;
       if (!props.loop) {
-        targetOffset = range(targetOffset, minOffset.value, 0);
+        targetOffset = clamp(targetOffset, minOffset.value, 0);
       }
 
       // console.log(offset, currentPosition, targetOffset);
@@ -241,9 +240,9 @@ export default create({
       const { active } = state;
       if (pace) {
         if (props.loop) {
-          return range(active + pace, -1, childCount.value);
+          return clamp(active + pace, -1, childCount.value);
         }
-        return range(active + pace, 0, childCount.value - 1);
+        return clamp(active + pace, 0, childCount.value - 1);
       }
       return active;
     };
@@ -296,13 +295,11 @@ export default create({
       resettPosition();
       touch.reset();
 
-      requestFrame(() => {
-        requestFrame(() => {
-          state.moving = false;
-          move({
-            pace: -1,
-            isEmit: true
-          });
+      requestAniFrame(() => {
+        state.moving = false;
+        move({
+          pace: -1,
+          isEmit: true
         });
       });
     };
@@ -311,13 +308,11 @@ export default create({
       resettPosition();
       touch.reset();
 
-      requestFrame(() => {
-        requestFrame(() => {
-          state.moving = false;
-          move({
-            pace: 1,
-            isEmit: true
-          });
+      requestAniFrame(() => {
+        state.moving = false;
+        move({
+          pace: 1,
+          isEmit: true
         });
       });
     };
@@ -327,19 +322,17 @@ export default create({
 
       touch.reset();
 
-      requestFrame(() => {
-        requestFrame(() => {
-          state.moving = false;
-          let targetIndex;
-          if (props.loop && childCount.value === index) {
-            targetIndex = state.active === 0 ? 0 : index;
-          } else {
-            targetIndex = index % childCount.value;
-          }
-          move({
-            pace: targetIndex - state.active,
-            isEmit: true
-          });
+      requestAniFrame(() => {
+        state.moving = false;
+        let targetIndex;
+        if (props.loop && childCount.value === index) {
+          targetIndex = state.active === 0 ? 0 : index;
+        } else {
+          targetIndex = index % childCount.value;
+        }
+        move({
+          pace: targetIndex - state.active,
+          isEmit: true
         });
       });
     };
@@ -396,7 +389,7 @@ export default create({
 
       if (isShouldMove && isCorrectDirection.value) {
         let pace = 0;
-        const offset = isVertical.value ? touch.state.offsetY : touch.state.offsetX;
+        const offset = isVertical.value ? touch.offsetY.value : touch.offsetX.value;
         if (props.loop) {
           pace = offset > 0 ? (delTa.value > 0 ? -1 : 1) : 0;
         } else {
@@ -462,10 +455,9 @@ export default create({
     return {
       state,
       classes,
+      classesInner,
+      classesPagination,
       container,
-      componentName,
-      isVertical,
-      slots,
       activePagination,
       onTouchStart,
       onTouchMove,

src/packages/__VUE/swiper/use-touch.ts

@@ -1,55 +0,0 @@
-import { reactive } from 'vue';
-
-const DISTANCE = 5;
-
-type Direction = 'horizontal' | 'vertical' | '';
-
-export function useTouch() {
-  const state = reactive({
-    startX: 0,
-    startY: 0,
-    deltaX: 0,
-    deltaY: 0,
-    offsetX: 0,
-    offsetY: 0,
-    direction: '' as Direction
-  });
-  const getDirection = (x: number, y: number) => {
-    if (x > y && x > DISTANCE) return 'horizontal';
-    if (y > x && y > DISTANCE) return 'vertical';
-    return '';
-  };
-  const reset = () => {
-    state.startX = 0;
-    state.startY = 0;
-    state.deltaX = 0;
-    state.deltaY = 0;
-    state.offsetX = 0;
-    state.offsetY = 0;
-    state.direction = '';
-  };
-
-  const start = ((e: TouchEvent) => {
-    reset();
-    state.startX = e.touches[0].clientX;
-    state.startY = e.touches[0].clientY;
-  }) as EventListener;
-
-  const move = ((e: TouchEvent) => {
-    state.deltaX = e.touches[0].clientX - state.startX;
-    state.deltaY = e.touches[0].clientY - state.startY;
-    state.offsetX = Math.abs(state.deltaX);
-    state.offsetY = Math.abs(state.deltaY);
-
-    if (!state.direction) {
-      state.direction = getDirection(state.offsetX, state.offsetY);
-    }
-  }) as EventListener;
-
-  return {
-    state,
-    start,
-    reset,
-    move
-  };
-}

src/packages/utils/useTouch/index.ts

@@ -23,7 +23,7 @@ export function useTouch() {
   const deltaY = ref(0);
   const offsetX = ref(0);
   const offsetY = ref(0);
-  const direction = ref<Direction>('');
+  const direction = ref<Direction | string>('');
 
   const isVertical = () => direction.value === 'vertical';
   const isHorizontal = () => direction.value === 'horizontal';