From 541517361ba1755ceb0153c2f0cb15ba453da21d Mon Sep 17 00:00:00 2001 From: kobeCristiano Date: Sun, 25 Mar 2018 11:10:09 +0800 Subject: [PATCH] =?UTF-8?q?[refactor]=20Tab=EF=BC=9A=E5=8D=87=E7=BA=A7?= =?UTF-8?q?=E5=88=B0=E8=87=AA=E5=AE=9A=E4=B9=89=E7=BB=84=E4=BB=B6=20(#161)?= 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用例 --- example/pages/tab/index.js | 21 ++++------- example/pages/tab/index.json | 5 ++- example/pages/tab/index.wxml | 26 +++++++++----- example/pages/tab/index.wxss | 3 ++ packages/tab/README.md | 55 +++++++++++++++------------- packages/tab/index.js | 69 ++++++++++++++++++++++++++++-------- packages/tab/index.json | 3 ++ packages/tab/index.wxml | 64 +++++++++++++++++++-------------- 8 files changed, 156 insertions(+), 90 deletions(-) create mode 100644 example/pages/tab/index.wxss create mode 100644 packages/tab/index.json diff --git a/example/pages/tab/index.js b/example/pages/tab/index.js index 72b43370..bac65181 100644 --- a/example/pages/tab/index.js +++ b/example/pages/tab/index.js @@ -1,6 +1,7 @@ -const { Tab, extend } = require('../../dist/index'); +const interval = 50; +let moduleId = 1; -Page(extend({}, Tab, { +Page({ data: { tab1: { list: [{ @@ -43,7 +44,7 @@ Page(extend({}, Tab, { }], selectedId: '1', scroll: true, - height: 45 + height: 80 }, tab3: { list: [{ @@ -66,17 +67,9 @@ Page(extend({}, Tab, { title: '商品6' }], selectedId: '1', + height: 45, scroll: true, - height: 45 + fixed: true } - }, - - handleZanTabChange(e) { - var componentId = e.componentId; - var selectedId = e.selectedId; - - this.setData({ - [`${componentId}.selectedId`]: selectedId - }); } -})); +}); diff --git a/example/pages/tab/index.json b/example/pages/tab/index.json index d80c56be..d9d50cff 100644 --- a/example/pages/tab/index.json +++ b/example/pages/tab/index.json @@ -1,3 +1,6 @@ { - "navigationBarTitleText": "Tab 标签" + "navigationBarTitleText": "Tab 标签", + "usingComponents": { + "zan-tab": "../../dist/tab/index" + } } diff --git a/example/pages/tab/index.wxml b/example/pages/tab/index.wxml index be56fa45..6872f9fd 100644 --- a/example/pages/tab/index.wxml +++ b/example/pages/tab/index.wxml @@ -5,18 +5,26 @@ TAB - + - + - + diff --git a/example/pages/tab/index.wxss b/example/pages/tab/index.wxss new file mode 100644 index 00000000..8f1853cb --- /dev/null +++ b/example/pages/tab/index.wxss @@ -0,0 +1,3 @@ +.doc-title { + margin-top: 50px; +} \ No newline at end of file diff --git a/packages/tab/README.md b/packages/tab/README.md index 9131b2e3..005cd509 100644 --- a/packages/tab/README.md +++ b/packages/tab/README.md @@ -1,37 +1,46 @@ ## Tab 标签 ### 使用指南 -在 app.wxss 中引入组件库所有样式 -```css -@import "path/to/zanui-weapp/dist/index.wxss"; -``` - -在需要使用的页面里引入组件库模板和脚本 -```html - -``` -```js -const { extend, Tab } = require('path/to/zanui-weapp/dist/index'); - -// 在 Page 中混入 Tab 里面声明的方法 -Page(extend({}, Tab, { - // ... -})); +在 index.json 中引入组件 +```json +{ + "usingComponents": { + "zan-tab": "path/to/zanui-weapp/dist/icon/index" + } +} +// 在 Page 中声明 Tab 依赖的展示数据 +Page({ + data: { + list: [{ + id: 'xxx', + title: 'xxx' + }], + selectedId: 'xxx', + ... + } +}) ``` ### 代码演示 -在模板中使用 zan-tab 模板，并传入相应数据 +可以在任意位置上使用 zan-tab 标签。传入对应的数据即可。 ```html - + ``` | 参数 | 说明 | 类型 | 默认值 | 必须 | |-----------|-----------|-----------|-------------|-------------| -| tab | tab 配置对象 | Object | - | | | tab.scroll | 是否开启 tab 左右滑动模式 | Boolean | - | | | tab.list | 可选项列表 | Array | - | | | tab.selectedId | 选中id | - | - | | | tab.height | tab高度 | Number | - | | +| tab.fixed | 是否固定位置 | Boolean | - | | | componentId | 用于区分页面多个 tab 组件 | String | - | | @@ -57,12 +66,10 @@ tab 组件中，tab.list 数据格式如下 }] ``` -当 tab 被点击时，可以在页面中注册 handleZanTabChange 方法来监听 +可以监听 bindtabchange 事件回调，在页面注册回调函数 ```js -Page(extend({}, Tab, { - handleZanTabChange({ componentId, selectedId }) { - // componentId 即为在模板中传入的 componentId - // 用于在一个页面上使用多个 tab 时，进行区分 +Page({ + customCallback(selectedId) { // selectId 表示被选中 tab 项的 id } })); diff --git a/packages/tab/index.js b/packages/tab/index.js index ff3c474e..03083149 100644 --- a/packages/tab/index.js +++ b/packages/tab/index.js @@ -1,19 +1,58 @@ -const { extractComponentId } = require('../common/helper'); +Component({ + externalClasses: 'class', -var Tab = { - _handleZanTabChange(e) { - const componentId = extractComponentId(e); - const dataset = e.currentTarget.dataset; - const selectedId = dataset.itemId; - const data = { componentId, selectedId }; + properties: { + scroll: { + type: Boolean, + value: false + }, + fixed: { + type: Boolean, + value: false + }, + height: { + type: Number, + value: 0 + }, + list: { + type: Array, + value: [] + }, + selectedId: { + type: [String, Number], + value: '', + observer(newVal) { + this.setData({ + currentTab: newVal + }); + } + }, + componentId: { + type: String, + default: '' + } + }, - console.info('[zan:tab:change]', data); - if (this.handleZanTabChange) { - this.handleZanTabChange(data); - } else { - console.warn('页面缺少 handleZanTabChange 回调函数'); + data: { + currentTab: '' + }, + + attached() { + this.setData({ + currentTab: this.data.selectedId + }); + }, + + methods: { + _handleZanTabChange(e) { + const selectedId = e.currentTarget.dataset.itemId; + + this.setData({ + currentTab: selectedId + }); + + console.info('[zan:tab:change] selectedId:', selectedId); + this.triggerEvent('tabchange', selectedId); } } -}; - -module.exports = Tab; +}) diff --git a/packages/tab/index.json b/packages/tab/index.json new file mode 100644 index 00000000..32640e0d --- /dev/null +++ b/packages/tab/index.json @@ -0,0 +1,3 @@ +{ + "component": true +} \ No newline at end of file diff --git a/packages/tab/index.wxml b/packages/tab/index.wxml index 6ece0e42..60474ed1 100644 --- a/packages/tab/index.wxml +++ b/packages/tab/index.wxml @@ -1,37 +1,47 @@ - + + + +