diff --git a/example/pages/switch/index.js b/example/pages/switch/index.js
index cde2a4c2..55e1813f 100644
--- a/example/pages/switch/index.js
+++ b/example/pages/switch/index.js
@@ -1,31 +1,22 @@
-var Zan = require('../../dist/index');
-
-Page(Object.assign({}, Zan.Switch, {
+Page({
   data: {
-    sync: {
-      checked: false
-    },
-    async: {
-      checked: true,
-      loading: false
-    },
+    checked: true,
+    checked2: true
   },
 
-  syncChange({ detail }) {
-    this.setData({
-      'sync.checked': detail.checked
-    });
+  onChange({ detail }) {
+    this.setData({ checked: detail });
   },
 
-  asyncChange({ detail }) {
-    this.setData({
-      'async.loading': true
+  onChange2({ detail }) {
+    wx.showModal({
+      title: '提示',
+      content: '是否切换开关？',
+      success: res => {
+        if (res.confirm) {
+          this.setData({ checked2: detail });
+        }
+      }
     });
-    setTimeout(() => {
-      this.setData({
-        'async.loading': false,
-        'async.checked': detail.checked
-      });
-    }, 500);
   }
-}));
+});
diff --git a/example/pages/switch/index.json b/example/pages/switch/index.json
index 6154d224..c3007790 100644
--- a/example/pages/switch/index.json
+++ b/example/pages/switch/index.json
@@ -1,8 +1,7 @@
 {
   "navigationBarTitleText": "Switch 开关",
   "usingComponents": {
-    "van-switch": "../../dist/switch/index",
-    "van-panel": "../../dist/panel/index",
-    "van-cell": "../../dist/cell/index"
+    "demo-block": "../../components/demo-block/index",
+    "van-switch": "../../dist/switch/index"
   }
 }
diff --git a/example/pages/switch/index.wxml b/example/pages/switch/index.wxml
index 00cb9b89..a94bab5f 100644
--- a/example/pages/switch/index.wxml
+++ b/example/pages/switch/index.wxml
@@ -1,23 +1,30 @@
-<van-panel title='同步开关'>
-  <van-cell>
-    <van-switch checked="{{sync.checked}}" bind:change="syncChange" />
-  </van-cell>
-</van-panel>
+<demo-block title="基础用法">
+  <van-switch
+    checked="{{ checked }}"
+    bind:change="onChange"
+  />
+</demo-block>
 
-<van-panel title='异步开关'>
-  <van-cell>
-    <van-switch checked="{{async.checked}}" disabled="{{ async.disabled }}" loading="{{ async.loading }}" bind:change="asyncChange" />
-  </van-cell>
-</van-panel>
+<demo-block title="禁用状态">
+  <van-switch
+    checked="{{ checked }}"
+    disabled
+    bind:change="onChange"
+  />
+</demo-block>
 
-<van-panel title='禁止改动的开关'>
-  <van-cell>
-    <van-switch disabled="{{ false }}" />
-  </van-cell>
-</van-panel>
+<demo-block title="加载状态">
+  <van-switch
+    checked="{{ checked }}"
+    loading
+    bind:change="onChange"
+  />
+</demo-block>
 
-<van-panel title='自定义高亮样式'>
-  <van-cell>
-    <van-switch theme-class="switch-theme" disabled="{{ false }}" checked/>
-  </van-cell>
-</van-panel>
+<demo-block title="高级用法">
+  <van-switch
+    checked="{{ checked2 }}"
+    size="36px"
+    bind:change="onChange2"
+  />
+</demo-block>
diff --git a/packages/switch/README.md b/packages/switch/README.md
index f0ae430d..3898294f 100644
--- a/packages/switch/README.md
+++ b/packages/switch/README.md
@@ -3,55 +3,88 @@
 ### 使用指南
 在 index.json 中引入组件
 ```json
-{
-  "usingComponents": {
-    "van-switch": "path/to/vant-weapp/dist/switch/index"
-  }
+"usingComponents": {
+  "van-switch": "path/to/vant-weapp/dist/switch/index"
 }
 ```
 
 ### 代码演示
-可以在页面任意位置上使用 van-switch 标签。
+
+#### 基础用法
+```html
+<van-switch checked="{{ checked }}" bind:change="onChange" />
+```
+
+```javascript
+Page({
+  data: {
+    checked: true
+  },
+
+  onChange({ detail }) {
+    // 需要手动对 checked 状态进行更新
+    this.setData({ checked: detail });
+  }
+});
+```
+
+#### 禁用状态
+```html
+<van-switch checked="{{ checked }}" disabled />
+```
+
+#### 加载状态
+```html
+<van-switch checked="{{ checked }}" loading  />
+```
+
+#### 高级用法
 ```html
 <van-switch
-  disabled="{{ disabled }}"
+  size="36px"
   checked="{{ checked }}"
-  loading="{{ loading }}"
-  bind:change="handleFieldChange"
-></van-switch>
+  bind:change="onChange"
+/>
 ```
 
 ```js
 Page({
   data: {
-    disabled: false,
-    checked: false,
-    loading: false
+    checked: true
   },
 
-  methods: {
-    handleFieldChange(event, data) {
-      console.log(event, data);
-    }
+  onChange({ detail }) {
+    wx.showModal({
+      title: '提示',
+      content: '是否切换开关？',
+      success: res => {
+        if (res.confirm) {
+          this.setData({ checked2: detail });
+        }
+      }
+    });
   }
 });
 ```
 
 ### API
-| 参数       | 说明      | 类型       | 默认值       | 必须      |
-|-----------|-----------|-----------|-------------|-------------|
-| loading | switch 是否是 loading 状态 | Boolean  | false | |
-| disabled | 是否不可用 | Boolean  | false | |
-| checked | 是否打开状态 | Boolean  | false  | 必须 |
+
+| 参数 | 说明 | 类型 | 默认值 |
+|-----------|-----------|-----------|-------------|
+| checked | 开关选中状态 | `Boolean` | `false` |
+| loading | 是否为加载状态 | `Boolean` | `false` |
+| disabled | 是否为禁用状态 | `Boolean` | `false` |
+| size | 开关尺寸 | `String` | `30px` |
 
 ### Event
 
-| 事件名称       | 说明      | 回调参数       |
+| 事件名 | 说明 | 参数 |
 |-----------|-----------|-----------|
-| change | 当绑定值变化时触发的事件 | event对象和数据对象（包含loading和checked） |
+| change | 开关状态切换回调 | event.detail: 是否选中开关 |
 
 ### 外部样式类
-| 类名       | 说明      |
+
+| 类名 | 说明 |
 |-----------|-----------|
-| custom-class | 根节点自定义样式类，通过这个可以改变根节点上的样式 |
-| theme-class | 根节点自定义样式类，用于更改根节点上的主题样式 |
+| custom-class | 根节点样式类 |
+| node-class | 圆点样式类 |
diff --git a/packages/switch/index.js b/packages/switch/index.js
index a86dbdd0..b965b6cb 100644
--- a/packages/switch/index.js
+++ b/packages/switch/index.js
@@ -1,33 +1,23 @@
 Component({
-  externalClasses: ['custom-class', 'theme-class'],
+  externalClasses: ['custom-class', 'node-class'],
 
   properties: {
-    checked: {
-      type: Boolean,
-      value: false
-    },
-
-    loading: {
-      type: Boolean,
-      value: false
-    },
-
-    disabled: {
-      type: Boolean,
-      value: false
+    checked: Boolean,
+    loading: Boolean,
+    disabled: Boolean,
+    size: {
+      type: String,
+      value: '30px'
     }
   },
 
   methods: {
-    handleZanSwitchChange() {
-      if (this.data.loading || this.data.disabled) {
-        return;
+    onClick() {
+      if (!this.data.disabled && !this.data.loading) {
+        const checked = !this.data.checked;
+        this.triggerEvent('input', checked);
+        this.triggerEvent('change', checked);
       }
-      let checked = !this.data.checked;
-      this.triggerEvent('change', {
-        checked,
-        loading: this.data.loading
-      });
     }
   }
 });
diff --git a/packages/switch/index.json b/packages/switch/index.json
index 467ce294..01077f5d 100644
--- a/packages/switch/index.json
+++ b/packages/switch/index.json
@@ -1,3 +1,6 @@
 {
-  "component": true
+  "component": true,
+  "usingComponents": {
+    "van-loading": "../loading/index"
+  }
 }
diff --git a/packages/switch/index.pcss b/packages/switch/index.pcss
index b12448fe..a90c432b 100644
--- a/packages/switch/index.pcss
+++ b/packages/switch/index.pcss
@@ -1,69 +1,45 @@
+@import '../helper/index.pcss';
+
 .van-switch {
+  height: 1em;
+  width: 1.6em;
+  display: inline-block;
   position: relative;
-  display: inline-block;
-  width: 52px;
-  height: 32px;
-  vertical-align: middle;
-  box-sizing: border-box;
-  border-radius: 16px;
-  background: #44DB5E;
-  border: 1px solid #44DB5E;
-}
-.van-switch__circle {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 30px;
-  height: 30px;
-  display: inline-block;
-  background: #fff;
-  border-radius: 15px;
-  box-sizing: border-box;
-  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 3px 1px 0 rgba(0, 0, 0, 0.05), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 3px 3px 0 rgba(0, 0, 0, 0.05);
-  transition: transform 0.35s cubic-bezier(0.45, 1, 0.4, 1);
-  z-index: 2;
-}
-.van-switch__bg {
-  position: absolute;
-  top: -1px;
-  left: -1px;
-  width: 52px;
-  height: 32px;
-  background: #fff;
-  border-radius: 26px;
-  display: inline-block;
-  border: 1px solid #e5e5e5;
-  box-sizing: border-box;
-  transition: transform 0.35s cubic-bezier(0.45, 1, 0.4, 1);
-  transform: scale(0);
-  transform-origin: 36px 16px;
-}
-.van-switch--on .van-switch__circle {
-  transform: translateX(20px);
-}
-.van-switch--off .van-switch__bg {
-  transform: scale(1);
-}
-.van-swtich--disabled {
-  opacity: 0.4;
-}
-.van-switch__loading {
-  position: absolute;
-  left: 7px;
-  top: 7px;
-  width: 16px;
-  height: 16px;
-  background: url(https://img.yzcdn.cn/public_files/2017/02/24/9acec77d91106cd15b8107c4633d9155.png) no-repeat;
-  background-size: 16px 16px;
-  animation: van-switch-loading 0.8s infinite linear;
-}
+  background: $white;
+  box-sizing: content-box;
+  border: 1px solid rgba(0, 0, 0, .1);
+  border-radius: 1em;
 
-@keyframes van-switch-loading {
-  from {
-    transform: rotate(0);
+  &__node {
+    top: 0;
+    left: 0;
+    z-index: 1;
+    width: 1em;
+    height: 1em;
+    transition: .3s;
+    position: absolute;
+    border-radius: 100%;
+    background-color: $white;
+    box-shadow: 0 3px 1px 0 rgba(0, 0, 0, .05), 0 2px 2px 0 rgba(0, 0, 0, .1), 0 3px 3px 0 rgba(0, 0, 0, .05);
   }
-  to {
-    transform: rotate(360deg);
+
+  &__loading {
+    top: 25%;
+    left: 25%;
+    width: 50%;
+    height: 50%;
+    position:absolute;
+  }
+
+  &--on {
+    background-color: #44db5e;
+
+    .van-switch__node {
+      transform: translateX(.6em);
+    }
+  }
+
+  &--disabled {
+    opacity: .4;
   }
 }
-
diff --git a/packages/switch/index.wxml b/packages/switch/index.wxml
index b0d87524..0eecb9fa 100644
--- a/packages/switch/index.wxml
+++ b/packages/switch/index.wxml
@@ -1,12 +1,9 @@
-<view
-  class="custom-class theme-class van-switch van-switch--{{ checked ? 'on' : 'off' }} {{ disabled ? 'van-swtich--disabled' : '' }}"
-  checked="{{ checked }}"
-  loading="{{ loading }}"
-  disabled="{{ disabled }}"
-  bindtap="handleZanSwitchChange"
+<div
+  class="van-switch custom-class {{ checked ? 'van-switch--on' : '' }} {{ disabled ? 'van-switch--disabled' : '' }}"
+  style="font-size: {{ size }};"
+  bind:tap="onClick"
 >
-  <view class="van-switch__circle">
-    <view hidden="{{ !loading }}" class="van-switch__loading"></view>
-  </view>
-  <view class="van-switch__bg"></view>
-</view>
+  <div class="van-switch__node node-class">
+    <van-loading wx:if="{{ loading }}" size="50%" custom-class="van-switch__loading" />
+  </div>
+</div>