blackteay/vant-weapp
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant-weapp.git synced 2025-09-11 07:19:44 +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 />

87
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(
this.navHeight = rect.height; (rect: wx.BoundingClientRectCallbackResult) => {
this.observerContentScroll(); this.navHeight = rect.height;
}); this.observerContentScroll();
}
);
}, },
destroyed() { destroyed() {
wx.createIntersectionObserver(this).disconnect(); this.createIntersectionObserver().disconnect();
}, },
methods: { methods: {
@ -157,23 +159,24 @@ 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(
const rect = rects[active]; (rects: wx.BoundingClientRectCallbackResult[]) => {
const width = lineWidth !== -1 ? lineWidth : rect.width / 2; const rect = rects[active];
const height = lineHeight !== -1 ? `height: ${lineHeight}px;` : ''; const width = lineWidth !== -1 ? lineWidth : rect.width / 2;
const height = lineHeight !== -1 ? `height: ${lineHeight}px;` : '';
let left = rects let left = rects
.slice(0, active) .slice(0, active)
.reduce((prev, curr) => prev + curr.width, 0); .reduce((prev, curr) => prev + curr.width, 0);
left += (rect.width - width) / 2; left += (rect.width - width) / 2;
const transition = skipTransition const transition = skipTransition
? '' ? ''
: `transition-duration: ${duration}s; -webkit-transition-duration: ${duration}s;`; : `transition-duration: ${duration}s; -webkit-transition-duration: ${duration}s;`;
this.set({ this.set({
lineStyle: ` lineStyle: `
${height} ${height}
width: ${width}px; width: ${width}px;
background-color: ${color}; background-color: ${color};
@ -181,8 +184,9 @@ VantComponent({
transform: translateX(${left}px); transform: translateX(${left}px);
${transition} ${transition}
` `
}); });
}); }
);
}, },
setTrack() { setTrack() {
@ -190,25 +194,27 @@ VantComponent({
if (!animated) return ''; if (!animated) return '';
this.getRect('.van-tabs__content').then((rect: wx.BoundingClientRectCallbackResult) => { this.getRect('.van-tabs__content').then(
const { width } = rect; (rect: wx.BoundingClientRectCallbackResult) => {
const { width } = rect;
this.set({ this.set({
trackStyle: ` trackStyle: `
width: ${width * this.child.length}px; width: ${width * this.child.length}px;
left: ${-1 * active * width}px; left: ${-1 * active * width}px;
transition: left ${duration}s; transition: left ${duration}s;
display: -webkit-box; display: -webkit-box;
display: flex; display: flex;
` `
}); });
const props = { width, animated }; const props = { width, animated };
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) {