blackteay/vant-weapp
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant-weapp.git synced 2025-09-11 15:19:45 +08:00
Code Issues Projects Releases Wiki Activity

[bugfix] Tab: offset-set not work、build class wrong

Browse Source 
fix #1310
This commit is contained in:
rex 2019-03-04 10:12:18 +08:00 committed by GitHub
parent 29775b20b8
commit 6b16d7b4cd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 50 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/tab/index.wxml
View File

@ -2,7 +2,7 @@
<view <view
wx:if="{{ animated || inited }}" wx:if="{{ animated || inited }}"
class="custom-class utils.bem('tab__pane', { active, inactive: !active }) }}" class="custom-class {{ utils.bem('tab__pane', { active, inactive: !active }) }}"
style="{{ animated || active ? '' : 'display: none;' }} {{ width ? 'width:' + width + 'px;' : '' }}" style="{{ animated || active ? '' : 'display: none;' }} {{ width ? 'width:' + width + 'px;' : '' }}"
> >
<slot /> <slot />

41
packages/tabs/index.ts
View File

@ -105,14 +105,16 @@ VantComponent({
this.setTrack(); this.setTrack();
this.scrollIntoView(); this.scrollIntoView();
this.getRect('.van-tabs__wrap').then((rect: wx.BoundingClientRectCallbackResult) => { this.getRect('.van-tabs__wrap').then(
(rect: wx.BoundingClientRectCallbackResult) => {
this.navHeight = rect.height; this.navHeight = rect.height;
this.observerContentScroll(); this.observerContentScroll();
}); }
);
}, },
destroyed() { destroyed() {
wx.createIntersectionObserver(this).disconnect(); this.createIntersectionObserver().disconnect();
}, },
methods: { methods: {
@ -157,7 +159,8 @@ VantComponent({
const { color, active, duration, lineWidth, lineHeight } = this.data; const { color, active, duration, lineWidth, lineHeight } = this.data;
this.getRect('.van-tab', true).then((rects: wx.BoundingClientRectCallbackResult[]) => { this.getRect('.van-tab', true).then(
(rects: wx.BoundingClientRectCallbackResult[]) => {
const rect = rects[active]; const rect = rects[active];
const width = lineWidth !== -1 ? lineWidth : rect.width / 2; const width = lineWidth !== -1 ? lineWidth : rect.width / 2;
const height = lineHeight !== -1 ? `height: ${lineHeight}px;` : ''; const height = lineHeight !== -1 ? `height: ${lineHeight}px;` : '';
@ -182,7 +185,8 @@ VantComponent({
${transition} ${transition}
` `
}); });
}); }
);
}, },
setTrack() { setTrack() {
@ -190,7 +194,8 @@ VantComponent({
if (!animated) return ''; if (!animated) return '';
this.getRect('.van-tabs__content').then((rect: wx.BoundingClientRectCallbackResult) => { this.getRect('.van-tabs__content').then(
(rect: wx.BoundingClientRectCallbackResult) => {
const { width } = rect; const { width } = rect;
this.set({ this.set({
@ -208,7 +213,8 @@ VantComponent({
this.child.forEach((item: Weapp.Component) => { this.child.forEach((item: Weapp.Component) => {
item.set(props); item.set(props);
}); });
}); }
);
}, },
setActiveTab() { setActiveTab() {
@ -245,7 +251,10 @@ VantComponent({
this.getRect('.van-tab', true), this.getRect('.van-tab', true),
this.getRect('.van-tabs__nav') this.getRect('.van-tabs__nav')
]).then( ]).then(
([tabRects, navRect]: [wx.BoundingClientRectCallbackResult[], wx.BoundingClientRectCallbackResult]) => { ([tabRects, navRect]: [
wx.BoundingClientRectCallbackResult[],
wx.BoundingClientRectCallbackResult
]) => {
const tabRect = tabRects[active]; const tabRect = tabRects[active];
const offsetLeft = tabRects const offsetLeft = tabRects
.slice(0, active) .slice(0, active)
@ -326,12 +335,14 @@ VantComponent({
const { offsetTop } = this.data; const { offsetTop } = this.data;
const { windowHeight } = wx.getSystemInfoSync(); const { windowHeight } = wx.getSystemInfoSync();
wx.createIntersectionObserver(this) this.createIntersectionObserver().disconnect();
.relativeToViewport({ top: -this.navHeight })
.observe('.van-tabs', res => { this.createIntersectionObserver()
.relativeToViewport({ top: -(this.navHeight + offsetTop) })
.observe('.van-tabs', (res: wx.ObserveCallbackResult) => {
const { top } = res.boundingClientRect; const { top } = res.boundingClientRect;
if (top > 0) { if (top > offsetTop) {
return; return;
} }
@ -346,9 +357,9 @@ VantComponent({
this.setPosition(position); this.setPosition(position);
}); });
wx.createIntersectionObserver(this) this.createIntersectionObserver()
.relativeToViewport({ bottom: -(windowHeight - 1) }) .relativeToViewport({ bottom: -(windowHeight - 1 - offsetTop) })
.observe('.van-tabs', res => { .observe('.van-tabs', (res: wx.ObserveCallbackResult) => {
const { top, bottom } = res.boundingClientRect; const { top, bottom } = res.boundingClientRect;
if (bottom < this.navHeight) { if (bottom < this.navHeight) {