From 86152d45ce6d03a5e8778a9f44fc8fda866b290d Mon Sep 17 00:00:00 2001 From: kobeCristiano Date: Sun, 25 Mar 2018 18:30:53 +0800 Subject: [PATCH] =?UTF-8?q?[refactor]=20Noticebar=EF=BC=9A=E5=8D=87?= =?UTF-8?q?=E7=BA=A7=E5=88=B0=E8=87=AA=E5=AE=9A=E4=B9=89=E7=BB=84=E4=BB=B6?= =?UTF-8?q?=20(#165)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * [improvement] Tab：升级到自定义组件 * fix: 去除冗余example代码 * [refactor] 重构badge为自定义组件 (#160) * fix: 去除tab组件使用对象入参方式，修改example用例 * refactor: 重构noticebar组件 * fix: 去除tab组件冗余属性字段 --- example/pages/noticebar/index.js | 39 +++--- example/pages/noticebar/index.json | 5 +- example/pages/noticebar/index.wxml | 63 +++++++--- example/pages/tab/index.js | 3 - packages/noticebar/README.md | 110 ++++++++++++----- packages/noticebar/index.js | 191 +++++++++++++++++++++-------- packages/noticebar/index.json | 6 + packages/noticebar/index.pcss | 40 +++++- packages/noticebar/index.wxml | 43 ++++--- packages/tab/README.md | 19 +-- packages/tab/index.js | 4 - 11 files changed, 377 insertions(+), 146 deletions(-) create mode 100644 packages/noticebar/index.json diff --git a/example/pages/noticebar/index.js b/example/pages/noticebar/index.js index 346675c3..f3edc73f 100644 --- a/example/pages/noticebar/index.js +++ b/example/pages/noticebar/index.js @@ -1,23 +1,28 @@ -var Zan = require('../../dist/index'); - -Page(Object.assign({}, Zan.NoticeBar, { +Page({ data: { - movable: { + bar1: { + text: '足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。', + scrollable: true, + delay: 1000 + }, + bar2: { + text: '足协杯战线连续第2年上演广州德比战', + color: '#fff', + backgroundColor: '#000' + }, + bar3: { text: '足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。' }, - static1: { - text: '足协杯战线连续第2年上演广州德比战' + bar4: { + text: '带icon的公告', + leftIcon: 'https://img.yzcdn.cn/public_files/2017/8/10/6af5b7168eed548100d9041f07b7c616.png' }, - static2: { - text: '足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。' + bar5: { + text: '足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。', + leftIcon: 'https://img.yzcdn.cn/public_files/2017/8/10/6af5b7168eed548100d9041f07b7c616.png', + mode: 'closeable', + scrollable: true, + speed: 10 } - }, - onShow() { - // 滚动通告栏需要initScroll - this.initZanNoticeBarScroll('movable'); - // initScroll的通告栏如果宽度足够显示内容将保持静止 - this.initZanNoticeBarScroll('static1'); - // 不进行initScroll的通告栏也将保持静止 - // this.initZanNoticeBarScroll('static2'); } -})) +}) diff --git a/example/pages/noticebar/index.json b/example/pages/noticebar/index.json index 0b9753c7..bd20212f 100644 --- a/example/pages/noticebar/index.json +++ b/example/pages/noticebar/index.json @@ -1,3 +1,6 @@ { - "navigationBarTitleText": "Noticebar 通告栏" + "navigationBarTitleText": "Noticebar 通告栏", + "usingComponents": { + "zan-noticebar": "../../dist/noticebar/index" + } } diff --git a/example/pages/noticebar/index.wxml b/example/pages/noticebar/index.wxml index 915fa634..2cb79e51 100644 --- a/example/pages/noticebar/index.wxml +++ b/example/pages/noticebar/index.wxml @@ -1,30 +1,63 @@ - NOTICEBAR 滚动通告栏 - + - 静止通告栏1 + 延时滚动通告栏 - + - 静止通告栏2 + 初始速度低滚动通告栏 - + + + + 改变颜色通告栏 + + + + + 静止通告栏 + + + + + 带icon公告 + + + + + 可关闭公告 + + \ No newline at end of file diff --git a/example/pages/tab/index.js b/example/pages/tab/index.js index bac65181..3497e043 100644 --- a/example/pages/tab/index.js +++ b/example/pages/tab/index.js @@ -1,6 +1,3 @@ -const interval = 50; -let moduleId = 1; - Page({ data: { tab1: { diff --git a/packages/noticebar/README.md b/packages/noticebar/README.md index 6269cc62..abfb04a7 100644 --- a/packages/noticebar/README.md +++ b/packages/noticebar/README.md @@ -1,49 +1,95 @@ ## Noticebar 通告栏 ### 使用指南 -在 app.wxss 中引入组件库所有样式 -```css -@import "path/to/zanui-weapp/dist/index.wxss"; +在 index.json 中引入组件 +```json +{ + "usingComponents": { + "zan-noticebar": "path/to/zanui-weapp/dist/noticebar/index" + } +} ``` -在需要使用的页面里引入组件库模板和脚本 -```html - - - - -``` - -// 在 Page 中混入 Noticebar 里面声明的方法 +在 index.js 中声明组件数据 ```js -const { Noticebar, extend } = require('path/to/zanui-weapp/dist/index'); - -Page(extend({}, Noticebar, { - // ... -})); +// 在 Page 中声明 Noticebar 依赖的展示数据 +Page({ + data: { + text: 'xxx', + scrollable: 'xxx', + ... + } +}) ``` ### 代码演示 `Noticebar` 组件支持滚动和静止两种展示方式，通过 text 传入展示文案 + +### 静止公告栏 ```html - + ``` -**注意** - -如果组件需要开启滚动展示，需要在 Page 的脚本中执行 initZanNoticeBarScroll 方法，来开启滚动展示 -```js -Page(extend({}, Noticebar, { - // ... - onShow() { - // 在方法中传入对应的 componentId - this.initZanNoticeBarScroll('movable'); - } - // ... -})); +### 滚动通告栏 +```html + ``` -| 参数 | 说明 | 类型 | 默认值 | 必须 | +### 延时滚动通告栏 +```html + +``` + +### 改变滚动通告栏滚动速度 +```html + +``` + +### 自定义通告栏字体颜色和背景色 +```html + +``` + +### 添加左侧icon通告栏 +```html + +``` + +### 可关闭通告栏 +```html + +``` + +| 参数 | 说明 | 类型 | 默认值 | 可选值 | |-----------|-----------|-----------|-------------|-------------| | text | 通告栏展示文案 | String | - | | -| componentId | 用于区分页面多个 Noticebar 组件，在调用 initZanNoticeBarScroll 时需要传入 | String | - | | +| mode | 通告栏模式 | String | '' | `closeable` | +| delay | 滚动延时时间 | Number | 0 | | +| speed | 滚动速度 | Number | 40 | | +| scrollable | 是否可滚动 | Boolean | false | | +| leftIcon | 左侧图标 | String | - | | +| color | 通告栏字体颜色 | String | `#f60` | | +| backgroundColor | 通告栏背景色 | String | `#fff7cc` | diff --git a/packages/noticebar/index.js b/packages/noticebar/index.js index b71a37e9..4b0a8ca2 100644 --- a/packages/noticebar/index.js +++ b/packages/noticebar/index.js @@ -1,74 +1,165 @@ -const ZanNoticeBar = { - initZanNoticeBarScroll(componentId) { - this.zanNoticeBarNode = this.zanNoticeBarNode || {}; - this.zanNoticeBarNode[`${componentId}`] = { - width: undefined, - wrapWidth: undefined, - animation: null, - resetAnimation: null - }; +const VALID_MODE = ['closeable']; +const FONT_COLOR = '#f60'; +const BG_COLOR = '#fff7cc'; - const currentComponent = this.zanNoticeBarNode[`${componentId}`]; - wx.createSelectorQuery() +Component({ + properties: { + text: { + type: String, + value: '' + }, + mode: { + type: String, + value: '' + }, + url: { + type: String, + value: '' + }, + openType: { + type: String, + value: 'navigate' + }, + delay: { + type: Number, + value: 0 + }, + speed: { + type: Number, + value: 40 + }, + scrollable: { + type: Boolean, + value: false + }, + leftIcon: { + type: String, + value: '' + }, + color: { + type: String, + value: FONT_COLOR + }, + backgroundColor: { + type: String, + value: BG_COLOR + } + }, + + data: { + show: true, + hasRightIcon: false, + width: undefined, + wrapWidth: undefined, + elapse: undefined, + animation: null, + resetAnimation: null, + timer: null + }, + + attached() { + const { mode } = this.data; + if (mode && this._checkMode(mode)) { + this.setData({ + hasRightIcon: true + }); + } + }, + + ready() { + this._init(); + }, + + methods: { + _checkMode(val) { + const isValidMode = ~VALID_MODE.indexOf(val); + if (!isValidMode) { + console.warn(`mode only accept value of ${VALID_MODE}, now get ${val}.`); + } + return isValidMode; + }, + + _init() { + wx.createSelectorQuery() .in(this) - .select(`#${componentId}__content`) - .boundingClientRect((rect) => { + .select('.zan-noticebar__content') + .boundingClientRect(rect => { if (!rect || !rect.width) { - console.warn('页面缺少 noticebar 元素'); + throw new Error('页面缺少 noticebar 元素'); return; } + this.setData({ + width: rect.width + }); - currentComponent.width = rect.width; - wx - .createSelectorQuery() + wx.createSelectorQuery() .in(this) - .select(`#${componentId}__content-wrap`) + .select('.zan-noticebar__content-wrap') .boundingClientRect((rect) => { if (!rect || !rect.width) { return; } - clearTimeout(this.data[componentId].setTimeoutId) + const wrapWidth = rect.width; + const { width, speed, scrollable, delay } = this.data; - currentComponent.wrapWidth = rect.width; - if (currentComponent.wrapWidth < currentComponent.width) { - var mstime = currentComponent.width / 40 * 1000; - currentComponent.animation = wx.createAnimation({ - duration: mstime, - timingFunction: 'linear' + if (scrollable && wrapWidth < width) { + const elapse = width / speed * 1000; + console.log(`delay: ${delay}`) + const animation = wx.createAnimation({ + duration: elapse, + timeingFunction: 'linear', + delay }); - currentComponent.resetAnimation = wx.createAnimation({ + const resetAnimation = wx.createAnimation({ duration: 0, - timingFunction: 'linear' + timeingFunction: 'linear' + }); + + this.setData({ + elapse, + wrapWidth, + animation, + resetAnimation + }, () => { + this._scroll(); }); - this.scrollZanNoticeBar(componentId, mstime); } }) - .exec(); + .exec(); }) - .exec(); - }, + .exec(); + }, - scrollZanNoticeBar(componentId, mstime) { - const currentComponent = this.zanNoticeBarNode[`${componentId}`]; - const resetAnimationData = currentComponent.resetAnimation.translateX(currentComponent.wrapWidth).step(); - this.setData({ - [`${componentId}.animationData`]: resetAnimationData.export() - }); - const aninationData = currentComponent.animation.translateX(-mstime * 40 / 1000).step(); - setTimeout(() => { + _scroll() { + const { animation, resetAnimation, wrapWidth, elapse, speed } = this.data; + const resetAnimationData = resetAnimation.translateX(wrapWidth).step(); + const animationData = animation.translateX(-elapse * speed / 1000).step(); this.setData({ - [`${componentId}.animationData`]: aninationData.export() + animationData: resetAnimation.export() }); - }, 100); + setTimeout(() => { + this.setData({ + animationData: animationData.export() + }) + }, 100); - const setTimeoutId = setTimeout(() => { - this.scrollZanNoticeBar(componentId, mstime); - }, mstime); - this.setData({ - [`${componentId}.setTimeoutId`]: setTimeoutId - }) + const timer = setTimeout(() => { + this._scroll(); + }, elapse); + + this.setData({ + timer + }); + }, + + _handleButtonClick() { + const { timer } = this.data; + timer && clearTimeout(timer); + this.setData({ + show: false, + timer: null + }); + } } -}; - -module.exports = ZanNoticeBar; +}) \ No newline at end of file diff --git a/packages/noticebar/index.json b/packages/noticebar/index.json new file mode 100644 index 00000000..9e5bbd55 --- /dev/null +++ b/packages/noticebar/index.json @@ -0,0 +1,6 @@ +{ + "component": true, + "usingComponents": { + "zan-icon": "../icon/index" + } +} \ No newline at end of file diff --git a/packages/noticebar/index.pcss b/packages/noticebar/index.pcss index f6a94b91..4a4ca31d 100644 --- a/packages/noticebar/index.pcss +++ b/packages/noticebar/index.pcss @@ -1,7 +1,43 @@ .zan-noticebar { - color: #f60; + display: flex; padding: 9px 10px; font-size: 12px; line-height: 1.5; - background-color: #fff7cc; + + &--within-icon { + position: relative; + padding-right: 30px; + } + + &__left-icon { + height: 18px; + min-width: 20px; + padding-top: 1px; + box-sizing: border-box; + + > image { + width: 16px; + height: 16px; + } + } + + &__right-icon { + position: absolute; + top: 10px; + right: 10px; + font-size: 15px; + line-height: 1; + } + + &__content-wrap { + position: relative; + flex: 1; + height: 18px; + overflow: hidden; + } + + &__content { + position: absolute; + white-space: nowrap; + } } diff --git a/packages/noticebar/index.wxml b/packages/noticebar/index.wxml index a3bc85e3..08efb94c 100644 --- a/packages/noticebar/index.wxml +++ b/packages/noticebar/index.wxml @@ -1,16 +1,31 @@ - + + + + + + + + + diff --git a/packages/tab/README.md b/packages/tab/README.md index 005cd509..5e368077 100644 --- a/packages/tab/README.md +++ b/packages/tab/README.md @@ -5,9 +5,13 @@ ```json { "usingComponents": { - "zan-tab": "path/to/zanui-weapp/dist/icon/index" + "zan-tab": "path/to/zanui-weapp/dist/tab/index" } } +``` + +在 index.js 中声明组件数据 +```js // 在 Page 中声明 Tab 依赖的展示数据 Page({ data: { @@ -36,15 +40,14 @@ Page({ | 参数 | 说明 | 类型 | 默认值 | 必须 | |-----------|-----------|-----------|-------------|-------------| -| tab.scroll | 是否开启 tab 左右滑动模式 | Boolean | - | | -| tab.list | 可选项列表 | Array | - | | -| tab.selectedId | 选中id | - | - | | -| tab.height | tab高度 | Number | - | | -| tab.fixed | 是否固定位置 | Boolean | - | | -| componentId | 用于区分页面多个 tab 组件 | String | - | | +| scroll | 是否开启 tab 左右滑动模式 | Boolean | - | | +| list | 可选项列表 | Array | - | | +| selectedId | 选中id | - | - | | +| height | tab高度 | Number | - | | +| fixed | 是否固定位置 | Boolean | - | | -tab 组件中，tab.list 数据格式如下 +tab 组件中，list 数据格式如下 ```js [{ // tab 项 id diff --git a/packages/tab/index.js b/packages/tab/index.js index 03083149..37c9b6ab 100644 --- a/packages/tab/index.js +++ b/packages/tab/index.js @@ -26,10 +26,6 @@ Component({ currentTab: newVal }); } - }, - componentId: { - type: String, - default: '' } },