diff --git a/app.json b/app.json index 97f7a4c6..cccd4264 100644 --- a/app.json +++ b/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", diff --git a/changelog.md b/changelog.md index e69de29b..7069156c 100644 --- a/changelog.md +++ b/changelog.md @@ -0,0 +1,4 @@ +`ZanUI-WeApp` 严格遵循 [Semantic Versioning 2.0.0](http://semver.org/lang/zh-CN/) 语义化版本规范。 + +## 2.1.0 +- 新增`switch`组件 diff --git a/dist/cell/index.wxss b/dist/cell/index.wxss index 387480ef..ee63bdde 100644 --- a/dist/cell/index.wxss +++ b/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; +} diff --git a/dist/index.js b/dist/index.js index 4f4469c1..6ba83f82 100644 --- a/dist/index.js +++ b/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'); diff --git a/dist/index.wxss b/dist/index.wxss index 8cea86dd..d20deb49 100644 --- a/dist/index.wxss +++ b/dist/index.wxss @@ -15,3 +15,4 @@ @import "toast/index.wxss"; @import "toptips/index.wxss"; @import "icon/index.wxss"; +@import "switch/index.wxss"; diff --git a/dist/switch/index.js b/dist/switch/index.js new file mode 100644 index 00000000..c73c0cab --- /dev/null +++ b/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; diff --git a/dist/switch/index.wxml b/dist/switch/index.wxml new file mode 100644 index 00000000..b99d2e3b --- /dev/null +++ b/dist/switch/index.wxml @@ -0,0 +1,15 @@ + diff --git a/dist/switch/index.wxss b/dist/switch/index.wxss new file mode 100644 index 00000000..796c9130 --- /dev/null +++ b/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); + } +} + diff --git a/example/cell/index.js b/example/cell/index.js index 99e7458d..609d03cb 100644 --- a/example/cell/index.js +++ b/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 + }); + } +})); diff --git a/example/cell/index.wxml b/example/cell/index.wxml index d779392c..ae55100a 100644 --- a/example/cell/index.wxml +++ b/example/cell/index.wxml @@ -1,3 +1,5 @@ + + CELL @@ -22,6 +24,16 @@ + + + + 开关 + +