index.js
1.9 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
import { VantComponent } from '../common/component';
var ITEM_HEIGHT = 44;
VantComponent({
props: {
items: Array,
mainActiveIndex: {
type: Number,
value: 0
},
activeId: {
type: Number,
value: 0
},
maxHeight: {
type: Number,
value: 300
}
},
data: {
subItems: [],
mainHeight: 0,
itemHeight: 0
},
watch: {
items: function items() {
this.updateSubItems();
this.updateMainHeight();
},
maxHeight: function maxHeight() {
this.updateItemHeight();
this.updateMainHeight();
},
mainActiveIndex: 'updateSubItems'
},
methods: {
// 当一个子项被选择时
onSelectItem: function onSelectItem(event) {
this.$emit('click-item', event.currentTarget.dataset.item);
},
// 当一个导航被点击时
onClickNav: function onClickNav(event) {
var index = event.currentTarget.dataset.index;
this.$emit('click-nav', {
index: index
});
},
// 更新子项列表
updateSubItems: function updateSubItems() {
var selectedItem = this.data.items[this.data.mainActiveIndex] || {};
this.setData({
subItems: selectedItem.children || []
});
this.updateItemHeight();
},
// 更新组件整体高度,根据最大高度和当前组件需要展示的高度来决定
updateMainHeight: function updateMainHeight() {
var maxHeight = Math.max(this.data.items.length * ITEM_HEIGHT, this.data.subItems.length * ITEM_HEIGHT);
this.setData({
mainHeight: Math.min(maxHeight, this.data.maxHeight)
});
},
// 更新子项列表高度,根据可展示的最大高度和当前子项列表的高度决定
updateItemHeight: function updateItemHeight() {
this.setData({
itemHeight: Math.min(this.data.subItems.length * ITEM_HEIGHT, this.data.maxHeight)
});
}
}
});