From d1b3cd3472aafe958fcf787df01036cfb52f5919 Mon Sep 17 00:00:00 2001 From: everywill Date: Sun, 1 Oct 2017 10:39:53 -0500 Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0Capsule,=20Noticebar,=20Popup?= =?UTF-8?q?=EF=BC=9B=E4=BF=AE=E6=AD=A3Dialog=E5=9C=A8=E9=9D=9E=E6=9C=80?= =?UTF-8?q?=E5=A4=96=E5=B1=82=E6=83=85=E5=86=B5=E4=B8=8B=E5=BC=95=E5=85=A5?= =?UTF-8?q?=E7=9A=84=E6=A0=B7=E5=BC=8F=E9=97=AE=E9=A2=98=EF=BC=9B=E6=9B=B4?= =?UTF-8?q?=E6=96=B0readme=E3=80=82=20(#32)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * style: badge上标大小改变更加灵活 * style: panel-title的行高跟随字号 * style: 绝对定位的元素width或height为auto，left，right，top，bottom不为auto时，auto的margin将计算为0，同初始值 * style: 修复作为组件使用时dialog的定位问题 * style: 修正示例 * style: add * style: capsule * style: modify readme * style: add noticebar * style: modify readme * style: noticebar优化 * style: add popup * style: remove * style: 左右反了... * style: 通告栏支持同一页面多个 * style: 独立管理不同noticebar的动画数据 --- README.md | 2 +- app.json | 19 +++++++------ dist/capsule/index.wxml | 6 ++++ dist/capsule/index.wxss | 28 ++++++++++++++++++ dist/dialog/index.wxss | 1 + dist/index.js | 11 ++++---- dist/index.wxss | 23 ++++++++------- dist/noticebar/index.js | 55 ++++++++++++++++++++++++++++++++++++ dist/noticebar/index.wxml | 16 +++++++++++ dist/noticebar/index.wxss | 7 +++++ dist/popup/index.wxss | 31 ++++++++++++++++++++ example/badge/index.js | 2 -- example/btn/index.js | 2 -- example/capsule/index.js | 2 ++ example/capsule/index.wxml | 13 +++++++++ example/card/index.js | 2 -- example/dashboard/index.js | 9 ++++++ example/dialog/index.js | 2 -- example/helper/index.js | 2 -- example/label/index.js | 2 -- example/label/index.wxml | 2 +- example/loadmore/index.js | 2 -- example/noticebar/index.js | 23 +++++++++++++++ example/noticebar/index.wxml | 30 ++++++++++++++++++++ example/panel/index.js | 2 -- example/popup/index.js | 16 +++++++++++ example/popup/index.wxml | 30 ++++++++++++++++++++ example/steps/index.js | 2 -- 28 files changed, 299 insertions(+), 43 deletions(-) create mode 100644 dist/capsule/index.wxml create mode 100644 dist/capsule/index.wxss create mode 100644 dist/noticebar/index.js create mode 100644 dist/noticebar/index.wxml create mode 100644 dist/noticebar/index.wxss create mode 100644 dist/popup/index.wxss create mode 100644 example/capsule/index.js create mode 100644 example/capsule/index.wxml create mode 100644 example/noticebar/index.js create mode 100644 example/noticebar/index.wxml create mode 100644 example/popup/index.js create mode 100644 example/popup/index.wxml diff --git a/README.md b/README.md index 813352b3..fc5916d3 100644 --- a/README.md +++ b/README.md @@ -10,7 +10,7 @@ ## 概述 [ZanUI-WeApp]是有赞移动 Web UI 规范 `ZanUI` 的小程序现实版本，结合了微信的视觉规范，为用户提供更加统一的使用感受。 -包含 badge、btn、card、cell、color、dialog、form、helper、icon、label、loadmore、panel、quantity、steps、tab、toast、toptip 共计 17 类组件或元素。 +包含 badge、btn、capsule、card、cell、color、dialog、form、helper、icon、label、loadmore、noticebar、panel、popup、quantity、steps、switch、tab、toast、toptip 共计 21 类组件或元素。 更多背景介绍，可以移步到 [我们专门写的的介绍文章](http://tech.youzan.com/zanui-weapp/)。 diff --git a/app.json b/app.json index cccd4264..0adeb411 100644 --- a/app.json +++ b/app.json @@ -3,21 +3,24 @@ "example/dashboard/index", "example/btn/index", "example/badge/index", + "example/capsule/index", + "example/card/index", "example/cell/index", + "example/dialog/index", + "example/form/index", + "example/helper/index", + "example/icon/index", "example/label/index", "example/loadmore/index", + "example/noticebar/index", "example/panel/index", - "example/tab/index", + "example/popup/index", "example/quantity/index", - "example/toptips/index", - "example/helper/index", - "example/form/index", "example/steps/index", "example/switch/index", - "example/card/index", - "example/toast/index", - "example/icon/index", - "example/dialog/index" + "example/tab/index", + "example/toptips/index", + "example/toast/index" ], "window":{ "navigationBarBackgroundColor": "#FAFAFA", diff --git a/dist/capsule/index.wxml b/dist/capsule/index.wxml new file mode 100644 index 00000000..b7ed859a --- /dev/null +++ b/dist/capsule/index.wxml @@ -0,0 +1,6 @@ + \ No newline at end of file diff --git a/dist/capsule/index.wxss b/dist/capsule/index.wxss new file mode 100644 index 00000000..7fbf4c98 --- /dev/null +++ b/dist/capsule/index.wxss @@ -0,0 +1,28 @@ +.zan-capsule { + display: inline-block; + font-size: 12px; + vertical-align: middle; + line-height: 16px; + transform: scale(0.83); +} +.zan-capsule__left, +.zan-capsule__right { + display: inline-block; + line-height: 16px; + height: 16px; + vertical-align: middle; + box-sizing: border-box; +} +.zan-capsule__left { + padding: 0 2px; + color: #fff; + background: #F24544; + border-radius: 2px 0 0 2px; + border: 1rpx solid #F24544; +} +.zan-capsule__right { + padding: 0 5px; + color: #F24544; + border-radius: 0 2px 2px 0; + border: 1rpx solid #F24544; +} diff --git a/dist/dialog/index.wxss b/dist/dialog/index.wxss index 0afa5587..cd1016f6 100644 --- a/dist/dialog/index.wxss +++ b/dist/dialog/index.wxss @@ -10,6 +10,7 @@ } .zan-dialog__container { position: fixed; + left: 0; bottom: 0; width: 750rpx; background: white; diff --git a/dist/index.js b/dist/index.js index 2d01615b..ed4bed90 100644 --- a/dist/index.js +++ b/dist/index.js @@ -1,6 +1,7 @@ -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'); exports.CheckLabel = require('./form/check_label'); +exports.NoticeBar = require('./noticebar/index'); +exports.Quantity = require('./quantity/index'); +exports.Switch = require('./switch/index'); +exports.Tab = require('./tab/index'); +exports.Toast = require('./toast/index'); +exports.TopTips = require('./toptips/index'); diff --git a/dist/index.wxss b/dist/index.wxss index 154fb4bf..2f2e404c 100644 --- a/dist/index.wxss +++ b/dist/index.wxss @@ -1,19 +1,22 @@ -@import "loadmore/index.wxss"; -@import "color/index.wxss"; -@import "helper/index.wxss"; -@import "panel/index.wxss"; -@import "btn/index.wxss"; -@import "cell/index.wxss"; -@import "card/index.wxss"; @import "badge/index.wxss"; +@import "btn/index.wxss"; +@import "capsule/index.wxss"; +@import "card/index.wxss"; +@import "cell/index.wxss"; +@import "color/index.wxss"; @import "dialog/index.wxss"; @import "form/index.wxss"; @import "form/check_label.wxss"; -@import "tab/index.wxss"; +@import "helper/index.wxss"; +@import "icon/index.wxss"; @import "label/index.wxss"; +@import "loadmore/index.wxss"; +@import "noticebar/index.wxss"; +@import "panel/index.wxss"; +@import "popup/index.wxss"; @import "quantity/index.wxss"; @import "steps/index.wxss"; +@import "switch/index.wxss"; +@import "tab/index.wxss"; @import "toast/index.wxss"; @import "toptips/index.wxss"; -@import "icon/index.wxss"; -@import "switch/index.wxss"; \ No newline at end of file diff --git a/dist/noticebar/index.js b/dist/noticebar/index.js new file mode 100644 index 00000000..0904e8e4 --- /dev/null +++ b/dist/noticebar/index.js @@ -0,0 +1,55 @@ +var ZanNoticeBar = { + initZanNoticeBarScroll: function (componentId) { + this.zanNoticeBarNode = this.zanNoticeBarNode || {}; + this.zanNoticeBarNode[`${componentId}`] = { + width: undefined, + wrapWidth: undefined, + animation: null, + resetAnimation: null + }; + var currentComponent = this.zanNoticeBarNode[`${componentId}`]; + var _this = this; + wx.createSelectorQuery().select(`#${componentId}__content`).boundingClientRect(function (rect) { + if (rect.width) { + currentComponent.width = rect.width; + wx.createSelectorQuery().select(`#${componentId}__content-wrap`).boundingClientRect(function (rect) { + currentComponent.wrapWidth = rect.width; + if (currentComponent.wrapWidth < currentComponent.width) { + var mstime = currentComponent.width / 40 * 1000; + currentComponent.animation = wx.createAnimation({ + duration: mstime, + timingFunction: 'linear' + }); + currentComponent.resetAnimation = wx.createAnimation({ + duration: 0, + timingFunction: 'linear' + }); + _this.scrollZanNoticeBar(componentId, mstime); + } + }).exec(); + } else { + console.warn('页面缺少 noticebar 元素'); + } + }).exec(); + }, + scrollZanNoticeBar: function (componentId, mstime) { + var currentComponent = this.zanNoticeBarNode[`${componentId}`]; + var resetAnimationData = currentComponent.resetAnimation.translateX(currentComponent.wrapWidth).step(); + this.setData({ + [`${componentId}.animationData`]: resetAnimationData.export() + }); + var aninationData = currentComponent.animation.translateX(-mstime * 40 / 1000).step(); + var _this = this; + setTimeout(function () { + _this.setData({ + [`${componentId}.animationData`]: aninationData.export() + }); + }, 100); + + setTimeout(function () { + _this.scrollZanNoticeBar(componentId, mstime); + }, mstime); + } +}; + +module.exports = ZanNoticeBar; diff --git a/dist/noticebar/index.wxml b/dist/noticebar/index.wxml new file mode 100644 index 00000000..a3bc85e3 --- /dev/null +++ b/dist/noticebar/index.wxml @@ -0,0 +1,16 @@ + diff --git a/dist/noticebar/index.wxss b/dist/noticebar/index.wxss new file mode 100644 index 00000000..f6a94b91 --- /dev/null +++ b/dist/noticebar/index.wxss @@ -0,0 +1,7 @@ +.zan-noticebar { + color: #f60; + padding: 9px 10px; + font-size: 12px; + line-height: 1.5; + background-color: #fff7cc; +} diff --git a/dist/popup/index.wxss b/dist/popup/index.wxss new file mode 100644 index 00000000..98fdfcc2 --- /dev/null +++ b/dist/popup/index.wxss @@ -0,0 +1,31 @@ +.zan-popup { + position: fixed; + background-color: #fff; + width: 100%; + height: 100%; + top: 50%; + left: 50%; + transform: translate3d(-50%, -50%, 0); + transition: .2s ease-out; +} + +.zan-popup--top { + width: 100%; + top: 0; + right: auto; + bottom: auto; + left: 50%; + transform: translate3d(-50%, 0, 0); +} + +.zan-popup--right { + transform: translate3d(50%, -50%, 0); +} + +.zan-popup--left { + transform: translate3d(-150%, -50%, 0); +} + +.zan-popup--show { + transform: translate3d(-50%, -50%, 0); +} diff --git a/example/badge/index.js b/example/badge/index.js index 99e7458d..454020c0 100644 --- a/example/badge/index.js +++ b/example/badge/index.js @@ -1,5 +1,3 @@ -var app = getApp() - Page({ data: { }, diff --git a/example/btn/index.js b/example/btn/index.js index 99e7458d..454020c0 100644 --- a/example/btn/index.js +++ b/example/btn/index.js @@ -1,5 +1,3 @@ -var app = getApp() - Page({ data: { }, diff --git a/example/capsule/index.js b/example/capsule/index.js new file mode 100644 index 00000000..3b7c183f --- /dev/null +++ b/example/capsule/index.js @@ -0,0 +1,2 @@ +Page({ +}) diff --git a/example/capsule/index.wxml b/example/capsule/index.wxml new file mode 100644 index 00000000..e8063549 --- /dev/null +++ b/example/capsule/index.wxml @@ -0,0 +1,13 @@ + + + + + CAPSULE + + + +