From c1223e0744a26fc557200102be77eed22bd9d716 Mon Sep 17 00:00:00 2001 From: zhangmin Date: Thu, 18 Oct 2018 10:26:22 +0800 Subject: [PATCH 01/17] [improvement] Icon: add new icons --- example/pages/icon/index.js | 3 +- packages/icon/index.less | 171 ++++++++++++++++++------------------ 2 files changed, 89 insertions(+), 85 deletions(-) diff --git a/example/pages/icon/index.js b/example/pages/icon/index.js index f006c47f1..1d337a447 100644 --- a/example/pages/icon/index.js +++ b/example/pages/icon/index.js @@ -96,7 +96,8 @@ Page({ 'hot', 'new', 'new-arrival', - 'hot-sale' + 'hot-sale', + 'cart-o' ] } }); diff --git a/packages/icon/index.less b/packages/icon/index.less index ac9a8bdc4..b96f1fcfb 100644 --- a/packages/icon/index.less +++ b/packages/icon/index.less @@ -4,7 +4,7 @@ font-style: normal; font-weight: normal; font-family: 'vant-icon'; - src: url('https://img.yzcdn.cn/vant/vant-icon-76f274.ttf') format('truetype'); + src: url('https://img.yzcdn.cn/vant/vant-icon-82b481.ttf') format('truetype'); } .van-icon { @@ -80,335 +80,338 @@ content: "\F00A"; } -.van-icon-cart::before { +.van-icon-cart-o::before { content: "\F00B"; } -.van-icon-cash-back-record::before { +.van-icon-cart::before { content: "\F00C"; } -.van-icon-cash-on-deliver::before { +.van-icon-cash-back-record::before { content: "\F00D"; } -.van-icon-certificate::before { +.van-icon-cash-on-deliver::before { content: "\F00E"; } -.van-icon-chat::before { +.van-icon-certificate::before { content: "\F00F"; } -.van-icon-check::before { +.van-icon-chat::before { content: "\F010"; } -.van-icon-checked::before { +.van-icon-check::before { content: "\F011"; } -.van-icon-clear::before { +.van-icon-checked::before { content: "\F012"; } -.van-icon-clock::before { +.van-icon-clear::before { content: "\F013"; } -.van-icon-close::before { +.van-icon-clock::before { content: "\F014"; } -.van-icon-completed::before { +.van-icon-close::before { content: "\F015"; } -.van-icon-contact::before { +.van-icon-completed::before { content: "\F016"; } -.van-icon-coupon::before { +.van-icon-contact::before { content: "\F017"; } -.van-icon-credit-pay::before { +.van-icon-coupon::before { content: "\F018"; } -.van-icon-debit-pay::before { +.van-icon-credit-pay::before { content: "\F019"; } -.van-icon-delete::before { +.van-icon-debit-pay::before { content: "\F01A"; } -.van-icon-description::before { +.van-icon-delete::before { content: "\F01B"; } -.van-icon-discount::before { +.van-icon-description::before { content: "\F01C"; } -.van-icon-ecard-pay::before { +.van-icon-discount::before { content: "\F01D"; } -.van-icon-edit-data::before { +.van-icon-ecard-pay::before { content: "\F01E"; } -.van-icon-edit::before { +.van-icon-edit-data::before { content: "\F01F"; } -.van-icon-exchange-record::before { +.van-icon-edit::before { content: "\F020"; } -.van-icon-exchange::before { +.van-icon-exchange-record::before { content: "\F021"; } -.van-icon-fail::before { +.van-icon-exchange::before { content: "\F022"; } -.van-icon-free-postage::before { +.van-icon-fail::before { content: "\F023"; } -.van-icon-gift-card-pay::before { +.van-icon-free-postage::before { content: "\F024"; } -.van-icon-gift-card::before { +.van-icon-gift-card-pay::before { content: "\F025"; } -.van-icon-gift::before { +.van-icon-gift-card::before { content: "\F026"; } -.van-icon-gold-coin::before { +.van-icon-gift::before { content: "\F027"; } -.van-icon-goods-collect::before { +.van-icon-gold-coin::before { content: "\F028"; } -.van-icon-home::before { +.van-icon-goods-collect::before { content: "\F029"; } -.van-icon-hot-sale::before { +.van-icon-home::before { content: "\F02A"; } -.van-icon-hot::before { +.van-icon-hot-sale::before { content: "\F02B"; } -.van-icon-idcard::before { +.van-icon-hot::before { content: "\F02C"; } -.van-icon-info-o::before { +.van-icon-idcard::before { content: "\F02D"; } -.van-icon-like-o::before { +.van-icon-info-o::before { content: "\F02E"; } -.van-icon-like::before { +.van-icon-like-o::before { content: "\F02F"; } -.van-icon-location::before { +.van-icon-like::before { content: "\F030"; } -.van-icon-logistics::before { +.van-icon-location::before { content: "\F031"; } -.van-icon-more-o::before { +.van-icon-logistics::before { content: "\F032"; } -.van-icon-more::before { +.van-icon-more-o::before { content: "\F033"; } -.van-icon-new-arrival::before { +.van-icon-more::before { content: "\F034"; } -.van-icon-new::before { +.van-icon-new-arrival::before { content: "\F035"; } -.van-icon-other-pay::before { +.van-icon-new::before { content: "\F036"; } -.van-icon-passed::before { +.van-icon-other-pay::before { content: "\F037"; } -.van-icon-password-not-view::before { +.van-icon-passed::before { content: "\F038"; } -.van-icon-password-view::before { +.van-icon-password-not-view::before { content: "\F039"; } -.van-icon-pause::before { +.van-icon-password-view::before { content: "\F03A"; } -.van-icon-peer-pay::before { +.van-icon-pause::before { content: "\F03B"; } -.van-icon-pending-deliver::before { +.van-icon-peer-pay::before { content: "\F03C"; } -.van-icon-pending-evaluate::before { +.van-icon-pending-deliver::before { content: "\F03D"; } -.van-icon-pending-orders::before { +.van-icon-pending-evaluate::before { content: "\F03E"; } -.van-icon-pending-payment::before { +.van-icon-pending-orders::before { content: "\F03F"; } -.van-icon-phone::before { +.van-icon-pending-payment::before { content: "\F040"; } -.van-icon-photo::before { +.van-icon-phone::before { content: "\F041"; } -.van-icon-photograph::before { +.van-icon-photo::before { content: "\F042"; } -.van-icon-play::before { +.van-icon-photograph::before { content: "\F043"; } -.van-icon-point-gift::before { +.van-icon-play::before { content: "\F044"; } -.van-icon-points-mall::before { +.van-icon-point-gift::before { content: "\F045"; } -.van-icon-points::before { +.van-icon-points-mall::before { content: "\F046"; } -.van-icon-qr-invalid::before { +.van-icon-points::before { content: "\F047"; } -.van-icon-qr::before { +.van-icon-qr-invalid::before { content: "\F048"; } -.van-icon-question::before { +.van-icon-qr::before { content: "\F049"; } -.van-icon-receive-gift::before { +.van-icon-question::before { content: "\F04A"; } -.van-icon-records::before { +.van-icon-receive-gift::before { content: "\F04B"; } -.van-icon-search::before { +.van-icon-records::before { content: "\F04C"; } -.van-icon-send-gift::before { +.van-icon-search::before { content: "\F04D"; } -.van-icon-setting::before { +.van-icon-send-gift::before { content: "\F04E"; } -.van-icon-share::before { +.van-icon-setting::before { content: "\F04F"; } -.van-icon-shop-collect::before { +.van-icon-share::before { content: "\F050"; } -.van-icon-shop::before { +.van-icon-shop-collect::before { content: "\F051"; } -.van-icon-shopping-cart::before { +.van-icon-shop::before { content: "\F052"; } -.van-icon-sign::before { +.van-icon-shopping-cart::before { content: "\F053"; } -.van-icon-stop::before { +.van-icon-sign::before { content: "\F054"; } -.van-icon-success::before { +.van-icon-stop::before { content: "\F055"; } -.van-icon-tosend::before { +.van-icon-success::before { content: "\F056"; } -.van-icon-underway::before { +.van-icon-tosend::before { content: "\F057"; } -.van-icon-upgrade::before { +.van-icon-underway::before { content: "\F058"; } -.van-icon-value-card::before { +.van-icon-upgrade::before { content: "\F059"; } -.van-icon-wap-home::before { +.van-icon-value-card::before { content: "\F05A"; } -.van-icon-wap-nav::before { +.van-icon-wap-home::before { content: "\F05B"; } -.van-icon-warn::before { +.van-icon-wap-nav::before { content: "\F05C"; } -.van-icon-wechat::before { +.van-icon-warn::before { content: "\F05D"; } +.van-icon-wechat::before { + content: "\F05E"; +} From 45dbe1ee246b5a3ce1f2eb65c9386eade350edd4 Mon Sep 17 00:00:00 2001 From: zhangmin Date: Wed, 24 Oct 2018 11:14:30 +0800 Subject: [PATCH 02/17] [improvement] Icon: optimize goods corner mark icon --- packages/icon/index.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/icon/index.less b/packages/icon/index.less index b96f1fcfb..41ae192b3 100644 --- a/packages/icon/index.less +++ b/packages/icon/index.less @@ -4,7 +4,7 @@ font-style: normal; font-weight: normal; font-family: 'vant-icon'; - src: url('https://img.yzcdn.cn/vant/vant-icon-82b481.ttf') format('truetype'); + src: url('https://img.yzcdn.cn/vant/vant-icon-f4e97b.ttf') format('truetype'); } .van-icon { From 653abe4251ff1ba13d138bff8ea90ea8eddce126 Mon Sep 17 00:00:00 2001 From: zhangmin Date: Wed, 31 Oct 2018 20:53:43 +0800 Subject: [PATCH 03/17] =?UTF-8?q?[bugfix]=20Icon=EF=BC=9A=E4=BF=AE?= =?UTF-8?q?=E5=A4=8D=E5=95=86=E5=93=81=E8=A7=92=E6=A0=87icon=E5=85=BC?= =?UTF-8?q?=E5=AE=B9=E6=80=A7=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- example/pages/icon/index.js | 3 ++- packages/icon/index.less | 3 +-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/example/pages/icon/index.js b/example/pages/icon/index.js index 1d337a447..adbdb0693 100644 --- a/example/pages/icon/index.js +++ b/example/pages/icon/index.js @@ -97,7 +97,8 @@ Page({ 'new', 'new-arrival', 'hot-sale', - 'cart-o' + 'cart-o', + 'question2' ] } }); diff --git a/packages/icon/index.less b/packages/icon/index.less index ac08b3828..803f6fa31 100644 --- a/packages/icon/index.less +++ b/packages/icon/index.less @@ -4,7 +4,7 @@ font-style: normal; font-weight: normal; font-family: 'vant-icon'; - src: url('https://img.yzcdn.cn/vant/vant-icon-ed790e.ttf') format('truetype'); + src: url('https://img.yzcdn.cn/vant/vant-icon-872dd0.ttf') format('truetype'); } .van-icon { @@ -419,4 +419,3 @@ .van-icon-wechat::before { content: "\F05F"; } -} From 13bd6837920d0fd1102e45f585a2078538836269 Mon Sep 17 00:00:00 2001 From: zhangmin Date: Mon, 26 Nov 2018 16:42:17 +0800 Subject: [PATCH 04/17] [improvement] Tabs: add animated props to change tabs with animation --- example/pages/tab/index.wxml | 14 +++++++++++ packages/tab/index.less | 7 ++++++ packages/tab/index.ts | 4 ++- packages/tab/index.wxml | 6 ++--- packages/tabs/index.less | 4 +++ packages/tabs/index.ts | 47 +++++++++++++++++++++++++++++++++--- packages/tabs/index.wxml | 6 ++++- 7 files changed, 79 insertions(+), 9 deletions(-) create mode 100644 packages/tab/index.less diff --git a/example/pages/tab/index.wxml b/example/pages/tab/index.wxml index f37ef876c..300c71f85 100644 --- a/example/pages/tab/index.wxml +++ b/example/pages/tab/index.wxml @@ -68,3 +68,17 @@ + + + + + + {{ '内容' + item }} + + + + diff --git a/packages/tab/index.less b/packages/tab/index.less new file mode 100644 index 000000000..38a551097 --- /dev/null +++ b/packages/tab/index.less @@ -0,0 +1,7 @@ +.van-tab__pane { + box-sizing: border-box; + + &--float { + float: left; + } +} diff --git a/packages/tab/index.ts b/packages/tab/index.ts index cd035c26c..830f860af 100644 --- a/packages/tab/index.ts +++ b/packages/tab/index.ts @@ -13,7 +13,9 @@ VantComponent({ data: { inited: false, - active: false + active: false, + animated: false, + width: null }, watch: { diff --git a/packages/tab/index.wxml b/packages/tab/index.wxml index 508c827d9..cb6c494e2 100644 --- a/packages/tab/index.wxml +++ b/packages/tab/index.wxml @@ -1,7 +1,7 @@ diff --git a/packages/tabs/index.less b/packages/tabs/index.less index 7c6299c87..cb8ba3c0c 100644 --- a/packages/tabs/index.less +++ b/packages/tabs/index.less @@ -90,6 +90,10 @@ height: @van-tabs-card-height; } } + + &__content { + overflow: hidden; + } } .van-tab { diff --git a/packages/tabs/index.ts b/packages/tabs/index.ts index 469f8a1db..7d21f3afa 100644 --- a/packages/tabs/index.ts +++ b/packages/tabs/index.ts @@ -3,6 +3,8 @@ import { VantComponent } from '../common/component'; type TabItemData = { active: boolean; inited?: boolean; + animated?: boolean; + width?: Number; }; VantComponent({ @@ -42,7 +44,7 @@ VantComponent({ }, duration: { type: Number, - value: 0.2 + value: 0.4 }, zIndex: { type: Number, @@ -51,14 +53,16 @@ VantComponent({ swipeThreshold: { type: Number, value: 4 - } + }, + animated: Boolean }, data: { tabs: [], lineStyle: '', scrollLeft: 0, - scrollable: false + scrollable: false, + trackStyle: '' }, watch: { @@ -69,7 +73,8 @@ VantComponent({ }, color: 'setLine', lineWidth: 'setLine', - active: 'setActiveTab' + active: 'setActiveTab', + animated: 'setTrack' }, beforeCreate() { @@ -78,6 +83,7 @@ VantComponent({ mounted() { this.setLine(); + this.setTrack(); this.scrollIntoView(); }, @@ -149,6 +155,38 @@ VantComponent({ }); }, + setTrack() { + const { + animated, + active, + duration + } = this.data; + + if (!animated) return ''; + + this.getRect('.van-tabs__content').then(rect => { + const { width } = rect; + + this.setData({ + trackStyle: ` + width: ${width * this.child.length}px; + transform: translateX(${-1 * active * width}px); + transition-duration: ${duration}s; + ` + }); + this.setTabsProps({ + width, + animated + }) + }) + }, + + setTabsProps(props) { + this.child.forEach(item => { + item.setData(props); + }); + }, + setActiveTab() { this.child.forEach((item, index) => { const data: TabItemData = { @@ -166,6 +204,7 @@ VantComponent({ this.setData({}, () => { this.setLine(); + this.setTrack(); this.scrollIntoView(); }); }, diff --git a/packages/tabs/index.wxml b/packages/tabs/index.wxml index aa00475a4..e294757c3 100644 --- a/packages/tabs/index.wxml +++ b/packages/tabs/index.wxml @@ -22,5 +22,9 @@ - + + + + + From ce537b88e0d1f1064670354d8daac8fa8712c81f Mon Sep 17 00:00:00 2001 From: zhangmin Date: Mon, 26 Nov 2018 21:19:34 +0800 Subject: [PATCH 05/17] Tabs: readme and default duration --- packages/tab/README.md | 16 +++++++++++++++- packages/tabs/index.ts | 2 +- 2 files changed, 16 insertions(+), 2 deletions(-) diff --git a/packages/tab/README.md b/packages/tab/README.md index 859fcae82..decab0406 100644 --- a/packages/tab/README.md +++ b/packages/tab/README.md @@ -111,6 +111,19 @@ Page({ }); ``` +#### 切换动画 + +可以通过`animated`来设置是否启用切换tab时的动画。 + +```html + + 内容 1 + 内容 2 + 内容 3 + 内容 4 + +``` + ### Tabs API | 参数 | 说明 | 类型 | 默认值 | @@ -120,9 +133,10 @@ Page({ | z-index | z-index 层级 | `Number` | `1` | | type | 样式风格，可选值为`card` | `String` | `line` | | border | 是否展示外边框，仅在`line`风格下生效 | `Boolean` | `true` | -| duration | 动画时间 (单位秒) | `Number` | `0.2` | +| duration | 动画时间 (单位秒) | `Number` | `0.3` | | line-width | 底部条宽度 (px) | `Number` | 与当前标签等宽 | | swipe-threshold | 滚动阈值，设置标签数量超过多少个可滚动 | `Number` | `4` | +| animated | 是否使用动画切换 Tabs | `Boolean` | - | ### Tab API diff --git a/packages/tabs/index.ts b/packages/tabs/index.ts index b3b049c46..60c248cac 100644 --- a/packages/tabs/index.ts +++ b/packages/tabs/index.ts @@ -44,7 +44,7 @@ VantComponent({ }, duration: { type: Number, - value: 0.4 + value: 0.3 }, zIndex: { type: Number, From 0a0338ff0a97c0298744c08527a665f95985a939 Mon Sep 17 00:00:00 2001 From: zhangmin Date: Tue, 4 Dec 2018 17:17:45 +0800 Subject: [PATCH 06/17] =?UTF-8?q?[improvement]=20Tabs=EF=BC=9Asupport=20`s?= =?UTF-8?q?wipeable`=20and=20`sticky`=20property?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- example/pages/tab/index.js | 9 ++- example/pages/tab/index.wxml | 28 +++++++++ packages/tab/README.md | 30 ++++++++++ packages/tabs/index.ts | 108 ++++++++++++++++++++++++++++++++++- packages/tabs/index.wxml | 14 ++++- 5 files changed, 182 insertions(+), 7 deletions(-) diff --git a/example/pages/tab/index.js b/example/pages/tab/index.js index 9906a9b97..18cd39e36 100644 --- a/example/pages/tab/index.js +++ b/example/pages/tab/index.js @@ -3,7 +3,8 @@ import Page from '../../common/page'; Page({ data: { tabs: [1, 2, 3, 4], - tabsMore: [1, 2, 3, 4, 5, 6, 7, 8] + tabsMore: [1, 2, 3, 4, 5, 6, 7, 8], + scrollTop: 0 }, onClickDisabled(event) { @@ -25,5 +26,11 @@ Page({ title: `点击标签 ${event.detail.index + 1}`, icon: 'none' }); + }, + + onPageScroll(event) { + this.setData({ + scrollTop: event.scrollTop + }); } }); diff --git a/example/pages/tab/index.wxml b/example/pages/tab/index.wxml index 300c71f85..3ac4f9183 100644 --- a/example/pages/tab/index.wxml +++ b/example/pages/tab/index.wxml @@ -69,6 +69,20 @@ + + + + + {{ '内容' + item }} + + + + + + + + + + + {{ '内容' + item }} + + + + diff --git a/packages/tab/README.md b/packages/tab/README.md index a1cbff729..351dd875b 100644 --- a/packages/tab/README.md +++ b/packages/tab/README.md @@ -111,6 +111,19 @@ Page({ }); ``` +#### 粘性布局 + +通过`sticky`属性可以开启粘性布局，粘性布局下，当 Tab 滚动到顶部时会自动吸顶 + +```html + + 内容 1 + 内容 2 + 内容 3 + 内容 4 + +``` + #### 切换动画 可以通过`animated`来设置是否启用切换tab时的动画。 @@ -124,6 +137,19 @@ Page({ ``` +#### 滑动切换 + +通过`swipeable`属性可以开启滑动切换标签页 + +```html + + 内容 1 + 内容 2 + 内容 3 + 内容 4 + +``` + ### Tabs API | 参数 | 说明 | 类型 | 默认值 | @@ -137,6 +163,9 @@ Page({ | line-width | 底部条宽度 (px) | `Number` | 与当前标签等宽 | | swipe-threshold | 滚动阈值，设置标签数量超过多少个可滚动 | `Number` | `4` | | animated | 是否使用动画切换 Tabs | `Boolean` | `false` | +| swipeable | 是否开启手势滑动切换 | `Boolean` | `false` | +| sticky | 是否使用粘性定位布局 | `Boolean` | `false` | +| offset-top | 粘性定位布局下与顶部的最小距离，单位 px | `Number` | `0` | ### Tab API @@ -158,6 +187,7 @@ Page({ | bind:click | 点击标签时触发 | index：标签索引，title：标题 | | bind:change | 当前激活的标签改变时触发 | index：标签索引，title：标题 | | bind:disabled | 点击被禁用的标签时触发 | index：标签索引，title：标题 | +| bind:scroll | 滚动时触发 | { scrollTop: 距离顶部位置, isFixed: 是否吸顶 } | ### 外部样式类 diff --git a/packages/tabs/index.ts b/packages/tabs/index.ts index 60c248cac..3f39a54ae 100644 --- a/packages/tabs/index.ts +++ b/packages/tabs/index.ts @@ -1,4 +1,5 @@ import { VantComponent } from '../common/component'; +import { touch } from '../mixins/touch'; type TabItemData = { active: boolean; @@ -8,6 +9,8 @@ type TabItemData = { }; VantComponent({ + mixins: [touch], + relation: { name: 'tab', type: 'descendant', @@ -54,7 +57,17 @@ VantComponent({ type: Number, value: 4 }, - animated: Boolean + animated: Boolean, + sticky: Boolean, + offsetTop: { + type: Number, + value: 0 + }, + swipeable: Boolean, + scrollTop: { + type: Number, + value: 0 + } }, data: { @@ -62,7 +75,8 @@ VantComponent({ lineStyle: '', scrollLeft: 0, scrollable: false, - trackStyle: '' + trackStyle: '', + wrapStyle: '' }, watch: { @@ -74,7 +88,8 @@ VantComponent({ color: 'setLine', lineWidth: 'setLine', active: 'setActiveTab', - animated: 'setTrack' + animated: 'setTrack', + scrollTop: 'onScroll' }, beforeCreate() { @@ -231,6 +246,93 @@ VantComponent({ }); }); }); + }, + + onTouchStart(event: Weapp.TouchEvent) { + if (!this.data.swipeable) return; + + this.touchStart(event); + }, + + onTouchMove(event: Weapp.TouchEvent) { + if (!this.data.swipeable) return; + + this.touchMove(event); + }, + + // watch swipe touch end + onTouchEnd() { + if (!this.data.swipeable) return; + + const { active, tabs } = this.data; + + const { direction, deltaX, offsetX } = this; + const minSwipeDistance = 50; + + if (direction === 'horizontal' && offsetX >= minSwipeDistance) { + if (deltaX > 0 && active !== 0) { + this.setActive(active - 1); + } else if (deltaX < 0 && active !== tabs.length - 1) { + this.setActive(active + 1); + } + } + }, + + setWrapStyle(position) { + const { offsetTop } = this.data; + let wrapStyle; + + switch (position) { + case 'top': + wrapStyle = ` + top: ${offsetTop}px; + position: fixed; + `; + break; + case 'bottom': + wrapStyle = ` + top: auto; + bottom: 0; + `; + break; + default: + wrapStyle = ''; + } + + // cut down `setData` + if (wrapStyle === this.data.wrapStyle) return; + + this.setData({ + wrapStyle + }); + }, + + // adjust tab position + onScroll(scrollTop) { + if (!this.data.sticky) return; + + const { offsetTop } = this.data; + + this.getRect('.van-tabs').then(rect => { + const { top, height } = rect; + + this.getRect('.van-tabs__wrap').then(rect => { + const { height: wrapHeight } = rect; + let position; + + if (offsetTop > top + height - wrapHeight) { + position = 'bottom'; + } else if (offsetTop > top) { + position = 'top'; + } + + this.$emit('scroll', { + scrollTop: scrollTop + offsetTop, + isFixed: position === 'top' + }); + this.setWrapStyle(position); + }); + }); } } }); diff --git a/packages/tabs/index.wxml b/packages/tabs/index.wxml index 6f9a5a360..ac9e211b0 100644 --- a/packages/tabs/index.wxml +++ b/packages/tabs/index.wxml @@ -1,5 +1,5 @@ - + - {{ item.title }} + + {{ item.title }} + - + From d62ad79316cf4d0e04bf7215f45cae2242256f0f Mon Sep 17 00:00:00 2001 From: zhangmin Date: Tue, 4 Dec 2018 17:21:43 +0800 Subject: [PATCH 07/17] fix: tabs readme --- packages/tab/README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/tab/README.md b/packages/tab/README.md index 351dd875b..d38caeb26 100644 --- a/packages/tab/README.md +++ b/packages/tab/README.md @@ -166,6 +166,7 @@ Page({ | swipeable | 是否开启手势滑动切换 | `Boolean` | `false` | | sticky | 是否使用粘性定位布局 | `Boolean` | `false` | | offset-top | 粘性定位布局下与顶部的最小距离，单位 px | `Number` | `0` | +| scroll-top | 页面的`scrollTop`，粘性布局下必须要传入，单位 px | `Number` | `0` | ### Tab API From 268c1180e37d37ef9b83a9961de259ca3327a13d Mon Sep 17 00:00:00 2001 From: zhangmin Date: Wed, 5 Dec 2018 21:25:10 +0800 Subject: [PATCH 08/17] fix: tab sticky --- packages/tabs/index.ts | 21 +++++++++++++++------ 1 file changed, 15 insertions(+), 6 deletions(-) diff --git a/packages/tabs/index.ts b/packages/tabs/index.ts index 3f39a54ae..476aa251f 100644 --- a/packages/tabs/index.ts +++ b/packages/tabs/index.ts @@ -76,7 +76,8 @@ VantComponent({ scrollLeft: 0, scrollable: false, trackStyle: '', - wrapStyle: '' + wrapStyle: '', + position: '' }, watch: { @@ -89,7 +90,8 @@ VantComponent({ lineWidth: 'setLine', active: 'setActiveTab', animated: 'setTrack', - scrollTop: 'onScroll' + scrollTop: 'onScroll', + offsetTop: 'setWrapStyle' }, beforeCreate() { @@ -278,8 +280,8 @@ VantComponent({ } }, - setWrapStyle(position) { - const { offsetTop } = this.data; + setWrapStyle() { + const { offsetTop, position } = this.data; let wrapStyle; switch (position) { @@ -318,7 +320,7 @@ VantComponent({ this.getRect('.van-tabs__wrap').then(rect => { const { height: wrapHeight } = rect; - let position; + let position = ''; if (offsetTop > top + height - wrapHeight) { position = 'bottom'; @@ -330,7 +332,14 @@ VantComponent({ scrollTop: scrollTop + offsetTop, isFixed: position === 'top' }); - this.setWrapStyle(position); + + if (position !== this.data.position) { + this.setData({ + position + }, () => { + this.setWrapStyle(); + }); + } }); }); } From a0cdc5319b77083fc09ec5c1ce11558f237ea58d Mon Sep 17 00:00:00 2001 From: zhangmin Date: Wed, 5 Dec 2018 21:27:05 +0800 Subject: [PATCH 09/17] fix: tabs touchmove event --- packages/tabs/index.wxml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/tabs/index.wxml b/packages/tabs/index.wxml index ac9e211b0..f377e4bf1 100644 --- a/packages/tabs/index.wxml +++ b/packages/tabs/index.wxml @@ -27,7 +27,7 @@ From a2a2fbd8c5cbb8f87aae12643281c3dd8c44a714 Mon Sep 17 00:00:00 2001 From: zhangmin Date: Fri, 7 Dec 2018 16:14:52 +0800 Subject: [PATCH 10/17] =?UTF-8?q?[bugfix]=20Tabs=EF=BC=9A=E4=BF=AE?= =?UTF-8?q?=E5=A4=8D=E5=BC=80=E5=90=AFanimated=E6=97=B6=E5=AF=BC=E8=87=B4?= =?UTF-8?q?=E7=9A=84=E6=BB=9A=E5=8A=A8=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- example/pages/tab/index.wxml | 2 +- packages/tab/index.less | 10 ++++++++-- packages/tab/index.wxml | 2 +- packages/tabs/index.ts | 1 + 4 files changed, 11 insertions(+), 4 deletions(-) diff --git a/example/pages/tab/index.wxml b/example/pages/tab/index.wxml index 3ac4f9183..51c950c89 100644 --- a/example/pages/tab/index.wxml +++ b/example/pages/tab/index.wxml @@ -104,7 +104,7 @@ wx:key="index" title="{{ '标签' + item }}" > - + {{ '内容' + item }} diff --git a/packages/tab/index.less b/packages/tab/index.less index 38a551097..95ea36654 100644 --- a/packages/tab/index.less +++ b/packages/tab/index.less @@ -1,7 +1,13 @@ .van-tab__pane { box-sizing: border-box; + overflow-y: auto; - &--float { - float: left; + &--active { + height: auto; + } + + &--inactive { + height: 0px; + overflow: visible; } } diff --git a/packages/tab/index.wxml b/packages/tab/index.wxml index cb6c494e2..7a926640e 100644 --- a/packages/tab/index.wxml +++ b/packages/tab/index.wxml @@ -1,6 +1,6 @@ diff --git a/packages/tabs/index.ts b/packages/tabs/index.ts index 315063d40..288806161 100644 --- a/packages/tabs/index.ts +++ b/packages/tabs/index.ts @@ -191,6 +191,7 @@ VantComponent({ width: ${width * this.child.length}px; transform: translateX(${-1 * active * width}px); transition-duration: ${duration}s; + display: flex; ` }); this.setTabsProps({ From 1eed4036f651180afd0a5855381fe327dd31d0b9 Mon Sep 17 00:00:00 2001 From: zhangmin Date: Mon, 17 Dec 2018 20:22:36 +0800 Subject: [PATCH 11/17] [Doc] NoticeBar --- packages/notice-bar/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/notice-bar/README.md b/packages/notice-bar/README.md index ee6497c79..c968cd804 100644 --- a/packages/notice-bar/README.md +++ b/packages/notice-bar/README.md @@ -58,7 +58,7 @@ | scrollable | 是否在长度溢出时滚动播放 | `Boolean` | `true` | | left-icon | 左侧图标图片 URL | `String` | - | | color | 文本颜色 | `String` | `#ed6a0c` | -| background | 滚动条背景 | `String` | `#fffbe8` | +| backgroundColor | 滚动条背景 | `String` | `#fffbe8` | | open-type | 微信开放能力 | `String` | `navigate` | ### Event From 0754a6a983592c62d1fb0b36c516b70f4dd2f711 Mon Sep 17 00:00:00 2001 From: zhangmin Date: Tue, 18 Dec 2018 20:45:08 +0800 Subject: [PATCH 12/17] =?UTF-8?q?[bugfix]=20Tabs=EF=BC=9A=E4=BF=AE?= =?UTF-8?q?=E5=A4=8Dtab=E4=BD=BF=E7=94=A8transition=E5=AF=BC=E8=87=B4?= =?UTF-8?q?=E7=9A=84=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/tabs/index.less | 4 ++++ packages/tabs/index.ts | 4 ++-- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/tabs/index.less b/packages/tabs/index.less index d00b41922..a0df7826d 100644 --- a/packages/tabs/index.less +++ b/packages/tabs/index.less @@ -94,6 +94,10 @@ &__content { overflow: hidden; } + + &__track { + position: relative; + } } .van-tab { diff --git a/packages/tabs/index.ts b/packages/tabs/index.ts index 288806161..df0d40581 100644 --- a/packages/tabs/index.ts +++ b/packages/tabs/index.ts @@ -189,8 +189,8 @@ VantComponent({ this.set({ trackStyle: ` width: ${width * this.child.length}px; - transform: translateX(${-1 * active * width}px); - transition-duration: ${duration}s; + left: ${-1 * active * width}px; + transition: left ${duration}s; display: flex; ` }); From 06315252bc6de783634aef1e654fef017de78635 Mon Sep 17 00:00:00 2001 From: zhangmin Date: Tue, 8 Jan 2019 17:05:17 +0800 Subject: [PATCH 13/17] fix: optimize tabs sticky --- packages/tabs/index.ts | 77 ++++++++++++++++++++++++++---------------- 1 file changed, 47 insertions(+), 30 deletions(-) diff --git a/packages/tabs/index.ts b/packages/tabs/index.ts index df0d40581..ccd67e5c5 100644 --- a/packages/tabs/index.ts +++ b/packages/tabs/index.ts @@ -63,11 +63,7 @@ VantComponent({ type: Number, value: 0 }, - swipeable: Boolean, - scrollTop: { - type: Number, - value: 0 - } + swipeable: Boolean }, data: { @@ -90,7 +86,6 @@ VantComponent({ lineWidth: 'setLine', active: 'setActiveTab', animated: 'setTrack', - scrollTop: 'onScroll', offsetTop: 'setWrapStyle' }, @@ -102,6 +97,12 @@ VantComponent({ this.setLine(); this.setTrack(); this.scrollIntoView(); + this.observerTabScroll(); + this.observerContentScroll(); + }, + + destroyed() { + wx.createIntersectionObserver(this).disconnect(); }, methods: { @@ -310,39 +311,55 @@ VantComponent({ }); }, - // adjust tab position - onScroll(scrollTop) { + observerTabScroll() { if (!this.data.sticky) return; const { offsetTop } = this.data; + wx.createIntersectionObserver(this, { + thresholds: [1] + }).relativeToViewport().observe('.van-tabs', result => { + const { top } = result.boundingClientRect; + let position = ''; + + if (offsetTop > top) { + position = 'top'; + } - this.getRect('.van-tabs').then(rect => { - const { top, height } = rect; + this.$emit('scroll', { + scrollTop: top + offsetTop, + isFixed: position === 'top' + }); - this.getRect('.van-tabs__wrap').then(rect => { - const { height: wrapHeight } = rect; - let position = ''; + this.setPosition(position); + }); + }, - if (offsetTop > top + height - wrapHeight) { - position = 'bottom'; - } else if (offsetTop > top) { - position = 'top'; - } + observerContentScroll() { + if (!this.data.sticky) return; - this.$emit('scroll', { - scrollTop: scrollTop + offsetTop, - isFixed: position === 'top' - }); + const { offsetTop } = this.data; + wx.createIntersectionObserver(this).relativeToViewport().observe('.van-tabs__content', result => { + const { top } = result.boundingClientRect; + let position = ''; + + if (result.intersectionRatio <= 0) { + position = 'bottom'; + } else if (offsetTop > top) { + position = 'top'; + } - if (position !== this.data.position) { - this.set({ - position - }, () => { - this.setWrapStyle(); - }); - } - }); + this.setPosition(position); }); + }, + + setPosition(position) { + if (position !== this.data.position) { + this.set({ + position + }, () => { + this.setWrapStyle(); + }); + } } } }); From cbf1a96c47ddfe3db653042318a520c29d97cd64 Mon Sep 17 00:00:00 2001 From: zhangmin Date: Tue, 8 Jan 2019 17:14:49 +0800 Subject: [PATCH 14/17] fix: tab readme and demo --- example/pages/tab/index.js | 9 +-------- example/pages/tab/index.wxml | 2 +- packages/tab/README.md | 1 - 3 files changed, 2 insertions(+), 10 deletions(-) diff --git a/example/pages/tab/index.js b/example/pages/tab/index.js index 18cd39e36..9906a9b97 100644 --- a/example/pages/tab/index.js +++ b/example/pages/tab/index.js @@ -3,8 +3,7 @@ import Page from '../../common/page'; Page({ data: { tabs: [1, 2, 3, 4], - tabsMore: [1, 2, 3, 4, 5, 6, 7, 8], - scrollTop: 0 + tabsMore: [1, 2, 3, 4, 5, 6, 7, 8] }, onClickDisabled(event) { @@ -26,11 +25,5 @@ Page({ title: `点击标签 ${event.detail.index + 1}`, icon: 'none' }); - }, - - onPageScroll(event) { - this.setData({ - scrollTop: event.scrollTop - }); } }); diff --git a/example/pages/tab/index.wxml b/example/pages/tab/index.wxml index 12d59bd3b..18891f853 100644 --- a/example/pages/tab/index.wxml +++ b/example/pages/tab/index.wxml @@ -87,7 +87,7 @@ - + Date: Tue, 15 Jan 2019 17:09:41 +0800 Subject: [PATCH 15/17] fix: rollback tabs use IntersectionObserver to implement sticky --- example/pages/tab/index.js | 6 +++ example/pages/tab/index.wxml | 4 +- packages/tabs/index.ts | 71 +++++++++++++++--------------------- 3 files changed, 37 insertions(+), 44 deletions(-) diff --git a/example/pages/tab/index.js b/example/pages/tab/index.js index 9906a9b97..fb653b012 100644 --- a/example/pages/tab/index.js +++ b/example/pages/tab/index.js @@ -25,5 +25,11 @@ Page({ title: `点击标签 ${event.detail.index + 1}`, icon: 'none' }); + }, + + onPageScroll(event) { + this.setData({ + scrollTop: event.scrollTop + }); } }); diff --git a/example/pages/tab/index.wxml b/example/pages/tab/index.wxml index 18891f853..3ef5fe55b 100644 --- a/example/pages/tab/index.wxml +++ b/example/pages/tab/index.wxml @@ -87,7 +87,7 @@ - + - + {{ '内容' + item }} diff --git a/packages/tabs/index.ts b/packages/tabs/index.ts index 75c867e3f..8c5722788 100644 --- a/packages/tabs/index.ts +++ b/packages/tabs/index.ts @@ -67,6 +67,10 @@ VantComponent({ offsetTop: { type: Number, value: 0 + }, + scrollTop: { + type: Number, + value: 0 } }, @@ -91,6 +95,7 @@ VantComponent({ lineHeight: 'setLine', active: 'setActiveTab', animated: 'setTrack', + scrollTop: 'onScroll', offsetTop: 'setWrapStyle' }, @@ -102,8 +107,6 @@ VantComponent({ this.setLine(); this.setTrack(); this.scrollIntoView(); - this.observerTabScroll(); - this.observerContentScroll(); }, destroyed() { @@ -319,55 +322,39 @@ VantComponent({ }); }, - observerTabScroll() { + // adjust tab position + onScroll(scrollTop) { if (!this.data.sticky) return; const { offsetTop } = this.data; - wx.createIntersectionObserver(this, { - thresholds: [1] - }).relativeToViewport().observe('.van-tabs', result => { - const { top } = result.boundingClientRect; - let position = ''; - - if (offsetTop > top) { - position = 'top'; - } - this.$emit('scroll', { - scrollTop: top + offsetTop, - isFixed: position === 'top' - }); + this.getRect('.van-tabs').then(rect => { + const { top, height } = rect; - this.setPosition(position); - }); - }, + this.getRect('.van-tabs__wrap').then(rect => { + const { height: wrapHeight } = rect; + let position = ''; - observerContentScroll() { - if (!this.data.sticky) return; + if (offsetTop > top + height - wrapHeight) { + position = 'bottom'; + } else if (offsetTop > top) { + position = 'top'; + } - const { offsetTop } = this.data; - wx.createIntersectionObserver(this).relativeToViewport().observe('.van-tabs__content', result => { - const { top } = result.boundingClientRect; - let position = ''; - - if (result.intersectionRatio <= 0) { - position = 'bottom'; - } else if (offsetTop > top) { - position = 'top'; - } - - this.setPosition(position); - }); - }, + this.$emit('scroll', { + scrollTop: scrollTop + offsetTop, + isFixed: position === 'top' + }); - setPosition(position) { - if (position !== this.data.position) { - this.set({ - position - }, () => { - this.setWrapStyle(); + if (position !== this.data.position) { + this.set({ + position + }, () => { + this.setWrapStyle(); + }); + } }); - } + }); } } }); From 2e4d4c5255801b5fd79ee44c9031bd6049008544 Mon Sep 17 00:00:00 2001 From: zhangmin Date: Tue, 23 Apr 2019 11:48:26 +0800 Subject: [PATCH 16/17] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8DSlider=E7=BB=84?= =?UTF-8?q?=E4=BB=B6=E6=8B=96=E6=8B=BD=E7=A7=BB=E5=8A=A8=E6=97=B6props?= =?UTF-8?q?=E5=8F=98=E5=8A=A8=E5=AF=BC=E8=87=B4=E7=9A=84=E6=8B=96=E5=8A=A8?= =?UTF-8?q?bug=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/slider/index.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/slider/index.ts b/packages/slider/index.ts index f0c04cb13..ac8babaa2 100644 --- a/packages/slider/index.ts +++ b/packages/slider/index.ts @@ -55,13 +55,14 @@ VantComponent({ this.touchMove(event); this.getRect('.van-slider').then((rect: wx.BoundingClientRectCallbackResult) => { const diff = this.deltaX / rect.width * 100; - this.updateValue(this.startValue + diff, false, true); + this.newValue = this.startValue + diff; + this.updateValue(this.newValue, false, true); }); }, onTouchEnd() { if (this.data.disabled) return; - this.updateValue(this.data.value, true); + this.updateValue(this.newValue, true); }, onClick(event: Weapp.TouchEvent) { From c81ccf5c8d2aaf58fba116d8b308aea4131cc291 Mon Sep 17 00:00:00 2001 From: zhangmin Date: Tue, 23 Apr 2019 11:51:57 +0800 Subject: [PATCH 17/17] fix: tab demo --- example/pages/tab/index.js | 6 ------ example/pages/tab/index.wxml | 2 +- 2 files changed, 1 insertion(+), 7 deletions(-) diff --git a/example/pages/tab/index.js b/example/pages/tab/index.js index cea8c9580..90a953bca 100644 --- a/example/pages/tab/index.js +++ b/example/pages/tab/index.js @@ -32,11 +32,5 @@ Page({ title: `点击标签 ${event.detail.index + 1}`, icon: 'none' }); - }, - - onPageScroll(event) { - this.setData({ - scrollTop: event.scrollTop - }); } }); diff --git a/example/pages/tab/index.wxml b/example/pages/tab/index.wxml index 4f16b1b39..b9db319c7 100644 --- a/example/pages/tab/index.wxml +++ b/example/pages/tab/index.wxml @@ -92,7 +92,7 @@ - +