blackteay/vant-weapp
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant-weapp.git synced 2025-04-06 03:58:05 +08:00
Code Issues Projects Releases Wiki Activity

fix(tabs): remove duplicated init offset

Browse Source 
fix #4202
This commit is contained in:
rex 2021-05-18 17:27:41 +08:00
parent 9d1c8b2ca9
commit 1d641b902f
2 changed files with 30 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
packages/tabs/index.ts
View File

@ -49,6 +49,10 @@ VantComponent({
type: null, type: null,
value: 0, value: 0,
observer(name) { observer(name) {
if (!this.skipInit) {
this.skipInit = true;
}
if (name !== this.getCurrentName()) { if (name !== this.getCurrentName()) {
this.setCurrentIndexByName(name); this.setCurrentIndexByName(name);
} }
@ -94,8 +98,9 @@ VantComponent({
scrollLeft: 0, scrollLeft: 0,
scrollable: false, scrollable: false,
currentIndex: 0, currentIndex: 0,
container: (null as unknown) as () => WechatMiniprogram.NodesRef, container: null as unknown as () => WechatMiniprogram.NodesRef,
skipTransition: true, skipTransition: true,
scrollWithAnimation: false,
lineOffsetLeft: 0, lineOffsetLeft: 0,
}, },
@ -105,8 +110,10 @@ VantComponent({
container: () => this.createSelectorQuery().select('.van-tabs'), container: () => this.createSelectorQuery().select('.van-tabs'),
}); });
this.resize(true); if (!this.skipInit) {
this.scrollIntoView(); this.resize();
this.scrollIntoView();
}
}); });
}, },
@ -191,10 +198,12 @@ VantComponent({
const shouldEmitChange = data.currentIndex !== null; const shouldEmitChange = data.currentIndex !== null;
this.setData({ currentIndex }); this.setData({ currentIndex });
nextTick(() => { requestAnimationFrame(() => {
this.resize(); this.resize();
this.scrollIntoView(); this.scrollIntoView();
});
nextTick(() => {
this.trigger('input'); this.trigger('input');
if (shouldEmitChange) { if (shouldEmitChange) {
this.trigger('change'); this.trigger('change');
@ -210,12 +219,12 @@ VantComponent({
} }
}, },
resize(skipTransition = false) { resize() {
if (this.data.type !== 'line') { if (this.data.type !== 'line') {
return; return;
} }
const { currentIndex, ellipsis } = this.data; const { currentIndex, ellipsis, skipTransition } = this.data;
Promise.all([ Promise.all([
getAllRect(this, '.van-tab'), getAllRect(this, '.van-tab'),
@ -234,16 +243,19 @@ VantComponent({
lineOffsetLeft += lineOffsetLeft +=
(rect.width - lineRect.width) / 2 + (ellipsis ? 0 : 8); (rect.width - lineRect.width) / 2 + (ellipsis ? 0 : 8);
this.setData({ this.setData({ lineOffsetLeft });
lineOffsetLeft,
skipTransition, if (skipTransition) {
}); nextTick(() => {
this.setData({ skipTransition: false });
});
}
}); });
}, },
// scroll active tab into view // scroll active tab into view
scrollIntoView() { scrollIntoView() {
const { currentIndex, scrollable } = this.data; const { currentIndex, scrollable, scrollWithAnimation } = this.data;
if (!scrollable) { if (!scrollable) {
return; return;
@ -261,6 +273,12 @@ VantComponent({
this.setData({ this.setData({
scrollLeft: offsetLeft - (navRect.width - tabRect.width) / 2, scrollLeft: offsetLeft - (navRect.width - tabRect.width) / 2,
}); });
if (!scrollWithAnimation) {
nextTick(() => {
this.setData({ scrollWithAnimation: true });
});
}
}); });
}, },

2
packages/tabs/index.wxml
View File

@ -14,7 +14,7 @@
<scroll-view <scroll-view
scroll-x="{{ scrollable }}" scroll-x="{{ scrollable }}"
scroll-with-animation scroll-with-animation="{{ scrollWithAnimation }}"
scroll-left="{{ scrollLeft }}" scroll-left="{{ scrollLeft }}"
class="{{ utils.bem('tabs__scroll', [type]) }}" class="{{ utils.bem('tabs__scroll', [type]) }}"
style="{{ color ? 'border-color: ' + color : '' }}" style="{{ color ? 'border-color: ' + color : '' }}"