diff --git a/src/swipe/index.js b/src/swipe/index.js
index dafffcb5d..5318ce141 100644
--- a/src/swipe/index.js
+++ b/src/swipe/index.js
@@ -12,6 +12,7 @@ export default createComponent({
     TouchMixin,
     BindEventMixin(function(bind, isBind) {
       bind(window, 'resize', this.resize, true);
+      bind(window, 'visibilitychange', this.onVisibilityChange);
 
       if (isBind) {
         this.initialize();
@@ -165,6 +166,14 @@ export default createComponent({
       this.initialize(this.activeIndicator);
     },
 
+    onVisibilityChange() {
+      if (document.hidden) {
+        this.clear();
+      } else {
+        this.autoPlay();
+      }
+    },
+
     onTouchStart(event) {
       if (!this.touchable) return;
 
diff --git a/src/swipe/test/index.spec.js b/src/swipe/test/index.spec.js
index 02d2b6b88..6f201b303 100644
--- a/src/swipe/test/index.spec.js
+++ b/src/swipe/test/index.spec.js
@@ -1,8 +1,19 @@
-import { mount, triggerDrag, later } from '../../../test';
+import { mount, triggerDrag, later, trigger } from '../../../test';
+
+function mockPageHidden() {
+  let hidden = true;
+
+  Object.defineProperty(document, 'hidden', {
+    get: () => hidden
+  });
+
+  trigger(window, 'visibilitychange');
+  hidden = false;
+}
 
 const Component = {
   template: `
-    <van-swipe ref="swipe" v-bind="$props">
+    <van-swipe ref="swipe" v-bind="$props" v-on="$listeners">
       <van-swipe-item :style="style">1</van-swipe-item>
       <van-swipe-item :style="style">2</van-swipe-item>
       <van-swipe-item :style="style">3</van-swipe-item>
@@ -142,3 +153,21 @@ test('not loop', () => {
   triggerDrag(track, -100, 0);
   expect(swipe.active).toEqual(2);
 });
+
+test('should pause auto play when page hidden', async () => {
+  const change = jest.fn();
+  mount(Component, {
+    propsData: {
+      loop: true,
+      autoplay: 1
+    },
+    listeners: {
+      change
+    }
+  });
+
+  mockPageHidden();
+  await later(50);
+
+  expect(change).toHaveBeenCalledTimes(0);
+});