Skip to content

Commit 69002c9

Browse files
Simplyme0823Simplyme0823
authored
Feat/tabs (#26)
* feat(Tabs): add stickTop api * feat(tabs): add fallback in sdk 1.0 * feat(tabs): add onTransiton, onTouchStart, fallback for tabs * fix(tabs): fix right fade style * feat(tabs): update fallback mode * docs(tabs): add fallback mode demo * perf(tabs): enhance tab content render * feat(tabs): add touch-angle prop in tabs * fix(tabs): fix touch-angle prop * fix(tabs): add Null value determination for createSelectQuery * chore(tabs): code style * fix(tabs): fix class name error
1 parent d3ae912 commit 69002c9

18 files changed

+554
-91
lines changed

‎demo/app.json

+1
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@
2020
"pages/SwipeAction/index",
2121
"pages/SwipeActionRef/index",
2222
"pages/Tabs/index",
23+
"pages/TabsFallback/index",
2324
"pages/VTabs/index",
2425
"pages/Stepper/index",
2526
"pages/Steps/index",

‎demo/pages/TabsFallback/index.axml

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<tabs
2+
index="{{curIdx}}"
3+
type="{{type}}"
4+
fallback="{{true}}"
5+
sticky="{{sticky}}"
6+
onChange="changeTab">
7+
<block a:for="{{tabs}}">
8+
<tab-content
9+
style="{{curIdx===index ? '' : 'display:none'}}"
10+
tab="{{item}}">
11+
<view>
12+
{{item.title}}
13+
<view
14+
a:for="{{height}}">
15+
........根据内容自适应高度........
16+
</view>
17+
</view>
18+
</tab-content>
19+
</block>
20+
</tabs>

‎demo/pages/TabsFallback/index.js

+81
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
const component2 = my.canIUse('component2');
2+
3+
Page({
4+
data: {
5+
curIdx: 2,
6+
height: 30,
7+
type: 'basis',
8+
animation: false,
9+
swipeable: false,
10+
titleSlot: false,
11+
plusSlot: true,
12+
sticky: false,
13+
tabs: [
14+
{
15+
title: '选项一',
16+
subTitle: '描述文案',
17+
corner: true,
18+
},
19+
{
20+
title: '选项二',
21+
subTitle: '描述文案描述',
22+
},
23+
{
24+
title: '选项三',
25+
subTitle: '描述',
26+
},
27+
],
28+
tabsType: [
29+
{ name: 'basis', value: '普通', checked: true },
30+
{ name: 'capsule', value: '胶囊' },
31+
{ name: 'mixin', value: '带描述' },
32+
],
33+
tabsNumber: [
34+
{ name: '1', value: '一条' },
35+
{ name: '2', value: '两条' },
36+
{ name: '3', value: '三条' },
37+
{ name: '-1', value: '很多', checked: true },
38+
],
39+
tabsAnimation: [
40+
{ name: true, value: 'true' },
41+
{ name: false, value: 'false', checked: true },
42+
],
43+
tabsSwipeable: [
44+
{ name: true, value: 'true' },
45+
{ name: false, value: 'false', checked: true },
46+
],
47+
tabsTitleSlotScope: [
48+
{ name: true, value: 'true' },
49+
{ name: false, value: 'false', checked: true },
50+
],
51+
tabsSticky: [
52+
{ name: true, value: 'true' },
53+
{ name: false, value: 'false', checked: true },
54+
],
55+
tabsPlusSlotScope: [
56+
{ name: true, value: 'true', checked: true },
57+
{ name: false, value: 'false' },
58+
],
59+
canSwipe: true,
60+
},
61+
onLoad() {
62+
if (!component2) {
63+
this.setData({
64+
canSwipe: component2,
65+
});
66+
}
67+
},
68+
// tabs 的点击回调
69+
changeTab(e) {
70+
this.setData({
71+
curIdx: e,
72+
});
73+
},
74+
// 右上角的 plus 区域点击事件
75+
iconClick() {
76+
my.alert({
77+
title: 'slot="plus"',
78+
content: '自定义 slot 的 icon 被点击',
79+
});
80+
},
81+
});

‎demo/pages/TabsFallback/index.json

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"defaultTitle": "Tabs",
3+
"usingComponents": {
4+
"tabs": "../../../src/Tabs/index",
5+
"tab-content": "../../../src/Tabs/TabItem/index",
6+
"icon": "../../../src/Icon/index"
7+
}
8+
}
9+

‎demo/pages/TabsSticky/index.acss

Whitespace-only changes.

‎demo/pages/TabsSticky/index.axml

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
2+
<view style="height:200px; z-index:999;background-color:red">
3+
dd
4+
</view>
5+
<tabs
6+
index="{{index}}"
7+
type="basic"
8+
swipeable="{{true}}"
9+
sticky="{{true}}"
10+
stickyTop="50px"
11+
onChange="changeTab">
12+
<block a:for="{{tabs}}">
13+
<tab-content
14+
tab="{{item}}">
15+
<view>
16+
{{index}}
17+
<view
18+
a:for="{{200}}">
19+
........根据内容自适应高度........
20+
</view>
21+
</view>
22+
</tab-content>
23+
</block>
24+
</tabs>
25+
26+
27+
<text
28+
a:if="{{!canSwipe}}"
29+
class="tips">
30+
当前未开启 component2 编译，无法使用 swipeable 属性。
31+
</text>

‎demo/pages/TabsSticky/index.js

+201
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,201 @@
1+
const component2 = my.canIUse('component2');
2+
3+
Page({
4+
data: {
5+
index: 0,
6+
type: 'basis',
7+
animation: false,
8+
swipeable: false,
9+
titleSlot: false,
10+
plusSlot: true,
11+
sticky: false,
12+
tabs: [
13+
{
14+
title: '选项一',
15+
subTitle: '描述文案',
16+
corner: true,
17+
},
18+
{
19+
title: '选项二',
20+
subTitle: '描述文案描述',
21+
}
22+
],
23+
canSwipe: true,
24+
},
25+
onLoad() {
26+
if (!component2) {
27+
this.setData({
28+
canSwipe: component2,
29+
});
30+
}
31+
},
32+
// 【配置】tabs 选项卡条数修改
33+
tabsNumberChange(e) {
34+
if (e.detail.value === '1') {
35+
this.setData({
36+
tabs: [
37+
{
38+
title: '选项',
39+
subTitle: '描述文案',
40+
badge: 6,
41+
},
42+
],
43+
});
44+
} else if (e.detail.value === '2') {
45+
this.setData({
46+
tabs: [
47+
{
48+
title: '选项',
49+
subTitle: '描述文案',
50+
},
51+
{
52+
title: '选项二',
53+
subTitle: '描述文案描述',
54+
},
55+
],
56+
});
57+
} else if (e.detail.value === '3') {
58+
this.setData({
59+
tabs: [
60+
{
61+
title: '选项一',
62+
subTitle: '描述文案',
63+
},
64+
{
65+
title: '选项二',
66+
subTitle: '描述文案描述',
67+
},
68+
{
69+
title: '选项三',
70+
subTitle: '描述',
71+
},
72+
],
73+
});
74+
} else {
75+
this.setData({
76+
tabs: [
77+
{
78+
title: '选项一',
79+
subTitle: '描述文案',
80+
},
81+
{
82+
title: '选项二',
83+
subTitle: '描述文案描述',
84+
},
85+
{
86+
title: '选项三',
87+
subTitle: '描述',
88+
},
89+
{
90+
title: '4 Tab',
91+
subTitle: '描述',
92+
showBadge: true,
93+
badge: 0,
94+
},
95+
{
96+
title: '5 Tab',
97+
subTitle: '描述描述',
98+
badge: 999,
99+
},
100+
{
101+
title: '3 Tab',
102+
subTitle: '描述',
103+
},
104+
{
105+
title: '4 Tab',
106+
subTitle: '描述',
107+
},
108+
{
109+
title: '151111 Tab',
110+
subTitle: '描述',
111+
},
112+
{
113+
title: '42345 Tab',
114+
subTitle: '描述',
115+
},
116+
{
117+
title: '1511116787 Tab',
118+
subTitle: '描述',
119+
},
120+
{
121+
title: '42452 Tab',
122+
subTitle: '描述',
123+
},
124+
{
125+
title: '15451111 Tab',
126+
},
127+
{
128+
title: '4234 Tab',
129+
subTitle: '描述',
130+
},
131+
{
132+
title: '11251111 Tab',
133+
subTitle: '描述',
134+
},
135+
{
136+
title: '44123 Tab',
137+
},
138+
{
139+
title: '1531111 Tab',
140+
subTitle: '描述',
141+
},
142+
{
143+
title: '41 Tab',
144+
},
145+
{
146+
title: '15111111 Tab',
147+
},
148+
],
149+
});
150+
}
151+
},
152+
// 【配置】type 类型选择
153+
tabsTypeChange(e) {
154+
this.setData({
155+
type: e.detail.value,
156+
});
157+
},
158+
// 【配置】animation 类型的选择
159+
tabsAnimationChange(e) {
160+
this.setData({
161+
animation: e.detail.value,
162+
});
163+
},
164+
// 【配置】swipeable 类型的选择
165+
tabsSwipeableChange(e) {
166+
this.setData({
167+
swipeable: e.detail.value,
168+
});
169+
},
170+
// 【配置】titleSlot 类型的选择
171+
tabsTitleSlotScopeChange(e) {
172+
this.setData({
173+
titleSlot: e.detail.value,
174+
});
175+
},
176+
// 【配置】plusSlot 类型的选择
177+
tabsPlusSlotScopeChange(e) {
178+
this.setData({
179+
plusSlot: e.detail.value,
180+
});
181+
},
182+
// 【配置】sticky 类型的选择
183+
tabsStickyChange(e) {
184+
this.setData({
185+
sticky: e.detail.value,
186+
});
187+
},
188+
// tabs 的点击回调
189+
changeTab(e) {
190+
this.setData({
191+
index: e,
192+
});
193+
},
194+
// 右上角的 plus 区域点击事件
195+
iconClick() {
196+
my.alert({
197+
title: 'slot="plus"',
198+
content: '自定义 slot 的 icon 被点击',
199+
});
200+
},
201+
});

‎demo/pages/TabsSticky/index.json

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"defaultTitle": "Tabs",
3+
"usingComponents": {
4+
"tabs": "../../../src/Tabs/index",
5+
"tab-content": "../../../src/Tabs/TabItem/index",
6+
"icon": "../../../src/Icon/index"
7+
}
8+
}

0 commit comments

Comments
 (0)