diff --git a/packages/swipe-item/index.js b/packages/swipe-item/index.js
new file mode 100644
index 000000000..b447735bb
--- /dev/null
+++ b/packages/swipe-item/index.js
@@ -0,0 +1,35 @@
+import { use } from '../utils';
+
+const [sfc, bem] = use('swipe-item');
+
+export default sfc({
+  data() {
+    return {
+      offset: 0
+    };
+  },
+
+  beforeCreate() {
+    this.$parent.swipes.push(this);
+  },
+
+  destroyed() {
+    this.$parent.swipes.splice(this.$parent.swipes.indexOf(this), 1);
+  },
+
+  render(h) {
+    const { vertical } = this.$parent;
+
+    const style = {
+      width: this.computedWidth + 'px',
+      height: vertical ? this.computedHeight + 'px' : '100%',
+      transform: `translate${vertical ? 'Y' : 'X'}(${this.offset}px)`
+    };
+
+    return (
+      <div class={bem()} style={style}>
+        {this.$slots.default}
+      </div>
+    );
+  }
+});
diff --git a/packages/swipe-item/index.vue b/packages/swipe-item/index.vue
deleted file mode 100644
index 8725b6e58..000000000
--- a/packages/swipe-item/index.vue
+++ /dev/null
@@ -1,42 +0,0 @@
-<template>
-  <div
-    :class="b()"
-    :style="style"
-  >
-    <slot />
-  </div>
-</template>
-
-<script>
-import create from '../utils/create';
-
-export default create({
-  name: 'swipe-item',
-
-  data() {
-    return {
-      offset: 0
-    };
-  },
-
-  computed: {
-    style() {
-      const { vertical, computedWidth, computedHeight } = this.$parent;
-
-      return {
-        width: computedWidth + 'px',
-        height: vertical ? computedHeight + 'px' : '100%',
-        transform: `translate${vertical ? 'Y' : 'X'}(${this.offset}px)`
-      };
-    }
-  },
-
-  beforeCreate() {
-    this.$parent.swipes.push(this);
-  },
-
-  destroyed() {
-    this.$parent.swipes.splice(this.$parent.swipes.indexOf(this), 1);
-  }
-});
-</script>