新增switch组件

app.json

@@ -13,6 +13,7 @@
     "example/helper/index",
     "example/form/index",
     "example/steps/index",
+    "example/switch/index",
     "example/card/index",
     "example/toast/index",
     "example/icon/index",

dist/cell/index.wxss

@@ -47,3 +47,7 @@
   border-style: solid;
   transform: translateY(-50%) matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
 }
+.zan-cell--switch {
+  padding-top: 6px;
+  padding-bottom: 6px;
+}

dist/index.js

@@ -2,3 +2,4 @@ exports.Tab = require('./tab/index');
 exports.Quantity = require('./quantity/index');
 exports.TopTips = require('./toptips/index');
 exports.Toast = require('./toast/index');
+exports.Switch = require('./switch/index');

dist/index.wxss

@@ -15,3 +15,4 @@
 @import "toast/index.wxss";
 @import "toptips/index.wxss";
 @import "icon/index.wxss";
+@import "switch/index.wxss";

dist/switch/index.js

@@ -0,0 +1,25 @@
+var Switch = {
+  _handleZanSwitchChange(e) {
+    var dataset = e.currentTarget.dataset;
+
+    var checked = !dataset.checked;
+    var loading = dataset.loading;
+    var disabled = dataset.disabled;
+    var componentId = dataset.componentId;
+
+    if (loading || disabled) return;
+
+    console.info('[zan:switch:change]', { checked, componentId });
+
+    if (this.handleZanSwitchChange) {
+      this.handleZanSwitchChange({
+        checked,
+        componentId
+      });
+    } else {
+      console.warn('页面缺少 handleZanSwitchChange 回调函数');
+    }
+  }
+};
+
+module.exports = Switch;

dist/switch/index.wxml

@@ -0,0 +1,15 @@
+<template name="zan-switch">
+  <view
+    class="zan-switch zan-switch--{{ checked ? 'on' : 'off' }} {{ disabled ? 'zan-swtich--disabled' : '' }}"
+    data-checked="{{ checked }}"
+    data-loading="{{ loading }}"
+    data-disabled="{{ disabled }}"
+    data-component-id="{{ componentId }}"
+    bindtap="_handleZanSwitchChange"
+  >
+    <view class="zan-switch__circle">
+      <view hidden="{{ !loading }}" class="zan-switch__loading"></view>
+    </view>
+    <view class="zan-switch__bg"></view>
+  </view>
+</template>

dist/switch/index.wxss

@@ -0,0 +1,69 @@
+.zan-switch {
+  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;
+}
+.zan-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;
+}
+.zan-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;
+}
+.zan-switch--on .zan-switch__circle {
+  transform: translateX(20px);
+}
+.zan-switch--off .zan-switch__bg {
+  transform: scale(1);
+}
+.zan-swtich--disabled {
+  opacity: 0.4;
+}
+.zan-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: zan-switch-loading 0.8s infinite linear;
+}
+
+@keyframes zan-switch-loading {
+  from {
+    transform: rotate(0);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+

example/cell/index.js

@@ -1,13 +1,19 @@
-var app = getApp()
+var Zan = require('../../dist/index');
 
-Page({
+Page(Object.assign({}, Zan.Switch, {
   data: {
+    checked: false
   },
 
-  onLoad: function () {
-
+  onLoad() {
   },
 
-  onShow: function() {
+  onShow() {
   },
-})
+
+  handleZanSwitchChange(e) {
+    this.setData({
+      checked: e.checked
+    });
+  }
+}));

example/cell/index.wxml

@@ -1,3 +1,5 @@
+<import src="/dist/switch/index.wxml" />
+
 <view class="container">
 
   <view class="doc-title">CELL</view>
@@ -22,6 +24,15 @@
     </view>
   </view>
 
+  <view class="zan-panel">
+    <view class="zan-cell zan-cell--switch">
+      <view class="zan-cell__bd">开关</view>
+      <view class="zan-cell__ft">
+        <template is="zan-switch" data="{{ checked }}"/>
+      </view>
+    </view>
+  </view>
+
   <view class="zan-panel">
     <view class="zan-cell zan-cell--access">
       <view class="zan-cell__bd">单行列表</view>

example/dashboard/index.js

@@ -1,5 +1,3 @@
-var app = getApp()
-
 Page({
   data: {
     list: [
@@ -42,6 +40,9 @@ Page({
       }, {
         name: 'Steps',
         path: '/example/steps/index'
+      }, {
+        name: 'Switch',
+        path: '/example/switch/index'
       }, {
         name: 'Tab',
         path: '/example/tab/index'

example/switch/index.js

@@ -0,0 +1,36 @@
+var Zan = require('../../dist/index');
+
+Page(Object.assign({}, Zan.Switch, {
+  data: {
+    sync: {
+      checked: false
+    },
+    async: {
+      checked: true,
+      loading: false
+    },
+  },
+
+  handleZanSwitchChange(e) {
+    var componentId = e.componentId;
+    var checked = e.checked;
+
+    if (componentId == 'sync') {
+      // 同步开关
+      this.setData({
+        [`${componentId}.checked`]: checked
+      });
+    } else if (componentId == 'async') {
+      // 异步开关
+      this.setData({
+        [`${componentId}.loading`]: true
+      });
+      setTimeout(() => {
+        this.setData({
+          [`${componentId}.loading`]: false,
+          [`${componentId}.checked`]: checked
+        });
+      }, 500);
+    }
+  }
+}));

example/switch/index.wxml

@@ -0,0 +1,23 @@
+<import src="/dist/switch/index.wxml" />
+
+<view class="container">
+
+  <view class="doc-title">SWITCH</view>
+
+  <view class="zan-panel-title">同步开关</view>
+  <view class="zan-panel">
+    <template is="zan-switch" data="{{ ...sync, componentId: 'sync' }}" />
+  </view>
+
+  <view class="zan-panel-title">异步开关</view>
+  <view class="zan-panel">
+    <template is="zan-switch" data="{{ ...async, componentId: 'async' }}" />
+  </view>
+
+  <view class="zan-panel-title">开关不可用</view>
+  <view class="zan-panel">
+    <template is="zan-switch" data="{{ checked: false, disabled: true, componentId: 'switch3' }}" />
+    <template is="zan-switch" data="{{ checked: true, disabled: true, componentId: 'switch4' }}" />
+  </view>
+
+</view>

example/switch/index.wxss

@@ -0,0 +1,6 @@
+.zan-panel {
+  padding: 10px;
+}
+.zan-switch {
+  margin-right: 8px;
+}