fix: https://github.com/ant-design/ant-design-mobile/issues/1954

HISTORY.md

@@ -1,5 +1,11 @@
 # History
 
+# 2.0.6
+
+- fix: https://github.com/ant-design/ant-design-mobile/issues/1954 As rc-gesture revert preventDefault in v0.0.19 for tabs+listview issue (https://github.com/ant-design/ant-design-mobile/issues/2589).
+- Then, rc-gesture@v0.0.20 fixed this issue by exposing the `event` as a property of Gesture object, and the Gesture object will be passed as the first parameter when invoked panMove event callback.
+- So, `rc-swipeout` invokes `event.preventDefault()` to prevent scroll event when pan moving.
+
 # 2.0.0
 
 - replace `hammer.js` width [rc-gesture](https://github.com/react-component/gesture)

examples/simple.tsx

@@ -54,12 +54,21 @@ const SwipeDemo = () => (
 
 ReactDOM.render(
   <div style={{ marginBottom: 12 }}>
-    <SwipeDemo />
+    <SwipeDemo/>
     <div style={{height: 100}}></div>
     <SwipeDemo />
-    <SwipeDemo />
     <div style={{height: 100}}></div>
-    <SwipeDemo />
+    <div>Test scroll</div>
+    <SwipeDemo/><SwipeDemo/><SwipeDemo/><SwipeDemo/><SwipeDemo/>
+    <SwipeDemo/><SwipeDemo/><SwipeDemo/><SwipeDemo/><SwipeDemo/>
+    <SwipeDemo/><SwipeDemo/><SwipeDemo/><SwipeDemo/><SwipeDemo/>
+    <SwipeDemo/><SwipeDemo/><SwipeDemo/><SwipeDemo/><SwipeDemo/>
+    <SwipeDemo/><SwipeDemo/><SwipeDemo/><SwipeDemo/><SwipeDemo/>
+    <SwipeDemo/><SwipeDemo/><SwipeDemo/><SwipeDemo/><SwipeDemo/>
+    <SwipeDemo/><SwipeDemo/><SwipeDemo/><SwipeDemo/><SwipeDemo/>
+    <SwipeDemo/><SwipeDemo/><SwipeDemo/><SwipeDemo/><SwipeDemo/>
+    <SwipeDemo/><SwipeDemo/><SwipeDemo/><SwipeDemo/><SwipeDemo/>
+    <SwipeDemo/><SwipeDemo/><SwipeDemo/><SwipeDemo/><SwipeDemo/>
   </div>,
   document.getElementById('__react-content'),
 );

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rc-swipeout",
-  "version": "2.0.5",
+  "version": "2.0.6",
   "description": "swipe out ui component for react(web and react-native)",
   "keywords": [
     "react",
@@ -54,7 +54,7 @@
   "dependencies": {
     "babel-runtime": "6.x",
     "classnames": "2.x",
-    "rc-gesture": "~0.0.18",
+    "rc-gesture": "~0.0.20",
     "react-native-swipeout": "^2.2.2"
   },
   "devDependencies": {

src/Swipeout.tsx

@@ -100,11 +100,16 @@ export default class Swipeout extends React.Component <SwipeoutPropType, any> {
     }
   }
   onPanMove = (e) => {
-    const { moveStatus } = e;
+    const { moveStatus, srcEvent } = e;
     const { x: deltaX } = moveStatus;
     if (!this.swiping) {
      return;
     }
+
+    // fixed scroll when it's pan and moving.
+    if (srcEvent && srcEvent.preventDefault) {
+      srcEvent.preventDefault();
+    }
     this._setStyle(deltaX);
   }