fix(Drag): 解决taro不能滑动问题 (#3054)

Author: irisSong

packages/nutui-taro-demo/src/app.scss

@@ -26,14 +26,17 @@ body {
 
   &.full {
     padding: 0 0 0 0;
-
     .h2 {
       padding-left: 17px;
     }
   }
 
   &.drag-full {
     padding: 57px 0 0 0;
+    min-height: 100vh;
+    .jd-scroll-view {
+      min-height: calc(100vh - 57px);
+    }
   }
 
   &-full {

src/packages/drag/demos/taro/demo2.tsx

@@ -10,7 +10,6 @@ const Demo2 = () => {
           top: '200px',
           left: '8px',
         }}
-        className="drag-demo21"
       >
         <Button type="primary">X</Button>
       </Drag>
@@ -20,7 +19,6 @@ const Demo2 = () => {
           top: '200px',
           right: '50px',
         }}
-        className="drag-demo22"
       >
         <Button type="primary">Y</Button>
       </Drag>

src/packages/drag/demos/taro/demo3.tsx

@@ -10,7 +10,6 @@ const Demo3 = () => {
         top: '275px',
         left: '0px',
       }}
-      className="drag-demo3"
     >
       <Button type="primary">attract</Button>
     </Drag>

src/packages/drag/demos/taro/demo4.tsx

@@ -11,24 +11,29 @@ const Demo4 = () => {
     return screenWidth - 300 - 9
   }
   const bottom = () => {
-    return windowHeight - 501 - 57
+    return windowHeight - 559
   }
   return (
     <>
       <div
         className="drag-boundary"
         style={{
-          position: 'absolute',
+          position: 'fixed',
           top: '360px',
           left: '8px',
           width: '300px',
           height: '200px',
           border: '1px solid var(--nutui-color-primary)',
+          boxSizing: 'border-box',
         }}
       />
       <Drag
-        className="drag-demo4"
-        boundary={{ top: 361, left: 9, bottom: bottom(), right: right() }}
+        boundary={{
+          top: 361,
+          left: 9,
+          bottom: bottom(),
+          right: right(),
+        }}
         style={{ top: '400px', left: '50px' }}
       >
         <Button type="primary">boundary</Button>

src/packages/drag/drag.scss

@@ -10,5 +10,6 @@
     display: inline-flex;
     width: fit-content;
     height: fit-content;
+    touch-action: none;
   }
 }

src/packages/drag/drag.taro.tsx

@@ -1,9 +1,10 @@
 import React, { FunctionComponent, useState, useEffect, useRef } from 'react'
-import { createSelectorQuery } from '@tarojs/taro'
-import { getWindowInfo } from '@/utils/get-system-info'
+import { View } from '@tarojs/components'
 import { BasicComponent, ComponentDefaults } from '@/utils/typings'
 import { getRectByTaro } from '@/utils/get-rect-by-taro'
 import { DragState } from './drag'
+import { getWindowInfo } from '@/utils/get-system-info'
+import { web } from '@/utils/platform-taro'
 
 export interface DragProps extends BasicComponent {
   attract: boolean
@@ -43,7 +44,6 @@ export const Drag: FunctionComponent<
     children,
     className,
     style,
-    ...reset
   } = {
     ...defaultProps,
     ...props,
@@ -67,22 +67,22 @@ export const Drag: FunctionComponent<
       const { top, left, bottom, right } = boundary
       const { screenWidth, windowHeight } = getWindowInfo()
 
-      const { width, height } = await getRectByTaro(dragRef.current)
-      dragRef.current?.getBoundingClientRect()
-      createSelectorQuery()
-        .select(`.${className}`)
-        .boundingClientRect((rec: any) => {
-          setBoundaryState({
-            top: -rec.top + top,
-            left: -rec.left + left,
-            bottom: windowHeight - rec.top - bottom - Math.ceil(height),
-            right: screenWidth - rec.left - right - Math.ceil(width),
-          })
+      const {
+        width,
+        height,
+        top: dragTop,
+        left: dragLeft,
+      } = await getRectByTaro(dragRef.current)
+
+      setBoundaryState({
+        top: -dragTop + top,
+        left: -dragLeft + left,
+        bottom: windowHeight - dragTop - bottom - Math.ceil(height),
+        right: screenWidth - dragLeft - right - Math.ceil(width),
+      })
 
-          middleLine.current =
-            screenWidth - rec.width - rec.left - (screenWidth - rec.width) / 2
-        })
-        .exec()
+      middleLine.current =
+        screenWidth - width - dragLeft - (screenWidth - width) / 2
     }
   }
 
@@ -123,7 +123,7 @@ export const Drag: FunctionComponent<
     }
   }
 
-  const touchEnd = (e: React.TouchEvent) => {
+  const touchEnd = () => {
     onDragEnd?.({
       offset: [translateX.current, translateY.current],
     })
@@ -141,34 +141,36 @@ export const Drag: FunctionComponent<
   }
 
   useEffect(() => {
-    timer.current = window.setTimeout(() => {
-      getInfo()
-    }, 300)
-
+    if (dragRef.current) {
+      if (web()) {
+        timer.current = window.setTimeout(() => {
+          getInfo()
+        }, 300)
+      } else {
+        getInfo()
+      }
+    }
     return () => {
       clearTimeout(timer.current)
     }
-  }, [])
+  }, [dragRef.current])
 
   return (
-    <div
-      style={style}
-      className={`${classPrefix} ${className}`}
-      {...reset}
-      ref={myDrag}
-    >
-      <div
+    <View style={style} className={`${classPrefix} ${className}`} ref={myDrag}>
+      <View
         className={`${classPrefix}-inner`}
-        onTouchStart={(event) => touchStart(event)}
         ref={dragRef}
+        catchMove
+        // @ts-ignore
+        onTouchStart={touchStart}
+        // @ts-ignore
         onTouchMove={touchMove}
         onTouchEnd={touchEnd}
-        // eslint-disable-next-line react/no-unknown-property
         style={currstyle}
       >
         {children}
-      </div>
-    </div>
+      </View>
+    </View>
   )
 }