/
TabLayout.js
110 lines (109 loc) · 2.94 KB
/
TabLayout.js
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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
const { defineComponent } = require("../jsbox-component");
module.exports = defineComponent({
name: "TabLayout",
props: {
tabs: [],
tabColor: $color("gray"),
tabSelectedColor: $color("black"),
index: 0
},
events: ["onTabChanged"],
methods: {
changeTab(tabIndex) {
this.props.index = tabIndex;
}
},
watch: {
index(newIndex, oldIndex) {
const data = this.view.data;
data[newIndex].title.textColor = this.props.tabSelectedColor;
data[newIndex].icon.icon = $icon(
this.props.tabs[newIndex].icon,
this.props.tabSelectedColor,
$size(50, 50)
);
data[oldIndex].title.textColor = this.props.tabColor;
data[oldIndex].icon.icon = $icon(
this.props.tabs[oldIndex].icon,
this.props.tabColor,
$size(50, 50)
);
this.view.data = data;
this.events.onTabChanged(newIndex, this.props.tabs[newIndex]);
}
},
render() {
// map函数内this的指向会改变,因此先把要props提取出来
const props = this.props;
const data = props.tabs.map(function (item, index) {
const color = index === props.index ? props.tabSelectedColor : props.tabColor;
return {
icon: {
icon: $icon(
item.icon,
color,
$size(50, 50)
)
},
title: {
text: item.title,
textColor: color,
}
};
});
return {
type: "matrix",
props: {
columns: this.props.tabs.length,
itemHeight: 60,
spacing: 0,
scrollEnabled: false,
bgcolor: $color("clear"),
template: [
{
type: "image",
props: { id: "icon", bgcolor: $color("clear") },
layout(make, view) {
make.centerX.equalTo(view.super);
make.width.height.equalTo(25);
make.top.inset(7);
}
},
{
type: "label",
props: { id: "title", font: $font(10) },
layout(make, view) {
make.centerX.equalTo(view.prev);
make.bottom.inset(13);
}
},
{
type: "canvas",
layout(make, view) {
make.top.inset(0);
make.height.equalTo(1 / $device.info.screen.scale);
make.left.right.inset(0);
},
events: {
draw(view, ctx) {
var width = view.frame.width;
var scale = $device.info.screen.scale;
ctx.strokeColor = $color("gray");
ctx.setLineWidth(1 / scale);
ctx.moveToPoint(0, 0);
ctx.addLineToPoint(width, 0);
ctx.strokePath();
}
}
}
],
data
},
events: {
didSelect: (sender, indexPath, item) => {
this.methods.changeTab(indexPath.item);
}
}
}
}
})