blackteay/vant-weapp
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant-weapp.git synced 2025-04-24 10:22:36 +08:00
Code Issues Projects Releases Wiki Activity

[improvement] Tab: optimize code (#899)

Browse Source
This commit is contained in:
neverland 2018-11-13 21:29:28 +08:00 committed by GitHub
parent d4f303043d
commit 10a76f2982
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 27 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
packages/tab/index.ts
View File

@ -17,14 +17,12 @@ VantComponent({
}, },
watch: { watch: {
disabled() { title: 'update',
const parent = this.getRelationNodes('../tabs/index')[0]; disabled: 'update'
if (parent) { },
parent.updateTabs();
}
},
title() { methods: {
update() {
const parent = this.getRelationNodes('../tabs/index')[0]; const parent = this.getRelationNodes('../tabs/index')[0];
if (parent) { if (parent) {
parent.updateTabs(); parent.updateTabs();

38
packages/tabs/index.ts
View File

@ -10,19 +10,15 @@ VantComponent({
name: 'tab', name: 'tab',
type: 'descendant', type: 'descendant',
linked(child: Weapp.Component) { linked(child: Weapp.Component) {
this.data.tabs.push({ this.child.push(child);
instance: child, this.updateTabs(this.data.tabs.concat(child.data));
data: child.data
});
this.updateTabs();
}, },
unlinked(child: Weapp.Component) { unlinked(child: Weapp.Component) {
const tabs = this.data.tabs.filter(item => item.instance !== child); const index = this.child.indexOf(child);
this.setData({ const { tabs } = this.data;
tabs, tabs.splice(index, 1);
scrollable: tabs.length > this.data.swipeThreshold this.child.splice(index, 1);
}); this.updateTabs(tabs);
this.setActiveTab();
} }
}, },
@ -65,7 +61,7 @@ VantComponent({
watch: { watch: {
swipeThreshold() { swipeThreshold() {
this.setData({ this.setData({
scrollable: this.data.tabs.length > this.data.swipeThreshold scrollable: this.child.length > this.data.swipeThreshold
}); });
}, },
color: 'setLine', color: 'setLine',
@ -73,14 +69,18 @@ VantComponent({
active: 'setActiveTab' active: 'setActiveTab'
}, },
beforeCreate() {
this.child = [];
},
mounted() { mounted() {
this.setLine(); this.setLine();
this.scrollIntoView(); this.scrollIntoView();
}, },
methods: { methods: {
updateTabs() { updateTabs(tabs) {
const { tabs } = this.data; tabs = tabs || this.data.tabs;
this.setData({ this.setData({
tabs, tabs,
scrollable: tabs.length > this.data.swipeThreshold scrollable: tabs.length > this.data.swipeThreshold
@ -91,13 +91,13 @@ VantComponent({
trigger(eventName: string, index: number) { trigger(eventName: string, index: number) {
this.$emit(eventName, { this.$emit(eventName, {
index, index,
title: this.data.tabs[index].data.title title: this.data.tabs[index].title
}); });
}, },
onTap(event: Weapp.Event) { onTap(event: Weapp.Event) {
const { index } = event.currentTarget.dataset; const { index } = event.currentTarget.dataset;
if (this.data.tabs[index].data.disabled) { if (this.data.tabs[index].disabled) {
this.trigger('disabled', index); this.trigger('disabled', index);
} else { } else {
this.trigger('click', index); this.trigger('click', index);
@ -138,7 +138,7 @@ VantComponent({
}, },
setActiveTab() { setActiveTab() {
this.data.tabs.forEach((item, index) => { this.child.forEach((item, index) => {
const data: TabItemData = { const data: TabItemData = {
active: index === this.data.active active: index === this.data.active
}; };
@ -147,8 +147,8 @@ VantComponent({
data.inited = true; data.inited = true;
} }
if (data.active !== item.instance.data.active) { if (data.active !== item.data.active) {
item.instance.setData(data); item.setData(data);
} }
}); });

6
packages/tabs/index.wxml
View File

@ -13,11 +13,11 @@
wx:for="{{ tabs }}" wx:for="{{ tabs }}"
wx:key="index" wx:key="index"
data-index="{{ index }}" data-index="{{ index }}"
class="van-ellipsis van-tab {{ index === active ? 'van-tab--active' : '' }} {{ item.data.disabled ? 'van-tab--disabled' : '' }}" class="van-ellipsis van-tab {{ index === active ? 'van-tab--active' : '' }} {{ item.disabled ? 'van-tab--disabled' : '' }}"
style="{{ color && (index === active) !== (type === 'card') && !item.data.disabled ? 'color: ' + color : '' }} {{ color && index === active && type === 'card' ? ';background-color:' + color : '' }} {{ color ? ';border-color: ' + color : '' }}" style="{{ color && (index === active) !== (type === 'card') && !item.disabled ? 'color: ' + color : '' }} {{ color && index === active && type === 'card' ? ';background-color:' + color : '' }} {{ color ? ';border-color: ' + color : '' }}"
bind:tap="onTap" bind:tap="onTap"
> >
{{ item.data.title }} {{ item.title }}
</view> </view>
</view> </view>
</scroll-view> </scroll-view>