Skip to content

Commit 2e1a556

Browse files
rayhomierayhomie
authored
Feat: IndexBar demo optimize (#1259)
* feat: google search console验证 * feat: indexBar受控模式优化 * feat: indexBar受控模式优化 * feat: indexBar受控模式优化
1 parent 4a4b721 commit 2e1a556

File tree

22 files changed

+320
-73
lines changed

22 files changed

+320
-73
lines changed

‎compiled/alipay/demo/app.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -99,7 +99,8 @@
9999
"pages/TabsElevator/index",
100100
"pages/IndexBarScrollView/index",
101101
"pages/SelectorFilter/index",
102-
"pages/Typography/index"
102+
"pages/Typography/index",
103+
"pages/IndexBarControl/index"
103104
],
104105
"window": {
105106
"enableWK": "YES",

‎compiled/alipay/demo/pages/IndexBarControl/index.acss

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
.base {
2+
width: 100%;
3+
height: 100vh;
4+
}
5+
.indexbar {
6+
position: fixed;
7+
right: 10px;
8+
top: 20vh;
9+
}

‎compiled/alipay/demo/pages/IndexBarControl/index.axml

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<view class="base">
2+
<index-bar
3+
className="indexbar"
4+
items="{{items}}"
5+
current="{{current}}"
6+
onChange="onChange"
7+
>
8+
<view
9+
slot="$default"
10+
slot-scope="props"
11+
>
12+
<list header="{{props.value.label}}">
13+
<list-item
14+
a:for="{{nameMap[props.value.label]}}"
15+
a:for-index="index"
16+
a:for-item="itemX"
17+
>
18+
{{itemX}}
19+
</list-item>
20+
</list>
21+
</view>
22+
</index-bar>
23+
</view>

‎compiled/alipay/demo/pages/IndexBarControl/index.js

+47
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
const nameMap = {
2+
'A': ['Alice', 'Andy', 'Amanda'],
3+
'B': ['Bob', 'Brian', 'Bella'],
4+
'C': ['Cathy', 'Carl', 'Chris'],
5+
'D': ['David', 'Diana', 'Derek'],
6+
'E': ['Eva', 'Evan', 'Eddie'],
7+
'F': ['Fiona', 'Frank', 'Fred'],
8+
'G': ['George', 'Grace', 'Gavin'],
9+
'H': ['Helen', 'Hank', 'Harry'],
10+
'I': ['Ivy', 'Ian', 'Isaac'],
11+
'J': ['Jack', 'Jill', 'James'],
12+
'K': ['Karen', 'Kyle', 'Kurt'],
13+
'L': ['Laura', 'Liam', 'Leo'],
14+
'M': ['Megan', 'Mike', 'Mona'],
15+
'N': ['Nina', 'Nick', 'Nancy'],
16+
'O': ['Olivia', 'Oscar', 'Owen'],
17+
'P': ['Paul', 'Pam', 'Pete'],
18+
'Q': ['Quincy', 'Quinn', 'Queen'],
19+
'R': ['Rachel', 'Ryan', 'Rita'],
20+
'S': ['Sam', 'Sara', 'Steve'],
21+
'T': ['Tom', 'Tina', 'Tim'],
22+
'U': ['Uma', 'Ulysses', 'Ursula'],
23+
'V': ['Violet', 'Victor', 'Vince'],
24+
'W': ['Wendy', 'Will', 'Wanda'],
25+
'X': ['Xander', 'Xenia', 'Xavier'],
26+
'Y': ['Yara', 'Yuri', 'Yvonne'],
27+
'Z': ['Zoe', 'Zach', 'Zane'],
28+
};
29+
30+
Page({
31+
data: {
32+
nameMap,
33+
items: [],
34+
current: 'S',
35+
},
36+
onLoad() {
37+
this.setData({
38+
items: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('').map((u) => {
39+
return { label: u, disablePreview: true };
40+
}),
41+
});
42+
},
43+
onChange(item, index) {
44+
console.log(item, index);
45+
this.setData({ current: item.label });
46+
},
47+
});

‎compiled/alipay/demo/pages/IndexBarControl/index.json

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{
2+
"defaultTitle": "IndexBar",
3+
"pullRefresh": "NO",
4+
"showProgress": "NO",
5+
"allowsBounceVertical": "NO",
6+
"usingComponents": {
7+
"index-bar": "../../../src/IndexBar/index",
8+
"list": "../../../src/List/index",
9+
"list-item": "../../../src/List/ListItem/index"
10+
}
11+
}

‎compiled/alipay/demo/pages/IndexBarScrollView/index.axml

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<index-bar
33
className="indexbar"
44
items="{{items}}"
5-
defaultCurrent="A"
5+
defaultCurrent="H"
66
onChange="onChange"
77
>
88
<view

‎compiled/alipay/demo/utils/constants.js

+5
Original file line numberDiff line numberDiff line change
@@ -92,6 +92,11 @@ export const componentList = [
9292
nameZN: '索引',
9393
path: '/pages/IndexBarScrollView/index',
9494
},
95+
{
96+
name: 'IndexBarControl',
97+
nameZN: '索引-控制',
98+
path: '/pages/IndexBarControl/index',
99+
},
95100
{
96101
name: 'Collapse',
97102
nameZN: '折叠面板',

‎compiled/alipay/src/IndexBar/index.axml

+1-1
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@
2929
{{item.label}}
3030
</view>
3131
<view
32-
a:if="{{item.label === touchKey && !item.disablePreview}}"
32+
a:if="{{item.label === touchKey && !item.disablePreview && moving}}"
3333
class="ant-indexbar-side-item-tip"
3434
>
3535
{{item.label}}

‎compiled/alipay/src/IndexBar/index.md

+24-16
Original file line numberDiff line numberDiff line change
@@ -20,27 +20,35 @@ toc: 'content'
2020
## 代码示例
2121

2222
### 基本使用
23+
2324
<code src='pages/IndexBar/index'></code>
2425

2526
### 结合列表使用
27+
2628
<code src='pages/IndexBarScrollView/index'></code>
2729

30+
### 控制选中状态
31+
32+
<code src='pages/IndexBarControl/index'></code>
33+
2834
## API
29-
| 属性 | 说明 | 类型 | 默认值 |
30-
| ---- | ---- | ---- | ------ |
31-
| activeClassName | 索引激活时的样式 | string | - |
32-
| className | 类名 | string | - |
33-
| current | 索引值 | string | - |
34-
| defaultCurrent | 默认索引 | string | - |
35-
| labelPreview | 索引预览内容，接收 value 和 index | slot | - |
36-
| items | 索引数组 | [Item](#item) | [] |
37-
| style | 样式 | string | - |
38-
| size | 索引的尺寸（宽高，单位 px） | number | 16 |
39-
| vibrate | 索引改变时是否震动 | boolean | true |
40-
| onChange | 索引改变时的回调 | (value: [Item](#item), index: number) => void |
35+
36+
| 属性 | 说明 | 类型 | 默认值 |
37+
| --------------- | --------------------------------- | --------------------------------------------- | ------ |
38+
| activeClassName | 索引激活时的样式 | string | - |
39+
| className | 类名 | string | - |
40+
| current | 索引值 | string | - |
41+
| defaultCurrent | 默认索引 | string | - |
42+
| labelPreview | 索引预览内容，接收 value 和 index | slot | - |
43+
| items | 索引数组 | [Item](#item) | [] |
44+
| style | 样式 | string | - |
45+
| size | 索引的尺寸（宽高，单位 px） | number | 16 |
46+
| vibrate | 索引改变时是否震动 | boolean | true |
47+
| onChange | 索引改变时的回调 | (value: [Item](#item), index: number) => void |
4148

4249
#### Item
43-
| 属性 | 说明 | 类型 | 默认值 |
44-
| ---- | ---- | ---- | ------ |
45-
| label | 索引标识 | string | - |
46-
| disablePreview | 禁用索引触发时的预览效果 | boolean | - |
50+
51+
| 属性 | 说明 | 类型 | 默认值 |
52+
| -------------- | ------------------------ | ------- | ------ |
53+
| label | 索引标识 | string | - |
54+
| disablePreview | 禁用索引触发时的预览效果 | boolean | - |

‎compiled/alipay/src/IndexBar/index.ts

+28-6
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import { IndexBarDefaultProps } from './props';
2-
import '../_util/assert-component2';
32

43
Component({
54
props: IndexBarDefaultProps,
@@ -15,20 +14,39 @@ Component({
1514
hasDefaultSlot: true,
1615
},
1716
didMount() {
18-
const { defaultCurrent, items } = this.props;
17+
const { defaultCurrent, current, items } = this.props;
1918
this.initItemHeight();
2019
this.initTopRange();
21-
const _index = items.findIndex((u) => defaultCurrent === u.label);
22-
this.setData({ currentKey: _index });
20+
const initCurrent = this.isControlled() ? current : defaultCurrent;
21+
const _index = items.findIndex((u) => initCurrent === u.label);
22+
this.setData({
23+
currentKey: _index,
24+
touchKeyIndex: _index,
25+
touchKey: initCurrent,
26+
});
2327
},
2428
didUpdate(_prop) {
2529
const { current, items } = this.props;
2630
if (_prop.current !== current) {
2731
const _index = items.findIndex((u) => current === u.label);
28-
this.setData({ currentKey: _index });
32+
this.setData({
33+
currentKey: _index,
34+
});
35+
if (!this.isControlled()) {
36+
this.setData({
37+
touchKeyIndex: _index,
38+
touchKey: current,
39+
});
40+
}
2941
}
3042
},
3143
methods: {
44+
isControlled(valueKey = 'current') {
45+
if ('controlled' in this.props) {
46+
return this.props.controlled;
47+
}
48+
return valueKey in this.props;
49+
},
3250
// 初始化每个块的高度，用已计算滑动距离
3351
initItemHeight() {
3452
my.createSelectorQuery()
@@ -110,7 +128,11 @@ Component({
110128
newIndex = topRange.findIndex((h) => scrollTop + 1 < h);
111129
}
112130
if (currentKey !== newIndex - 1 && newIndex - 1 >= 0 && !moving) {
113-
this.setData({ currentKey: newIndex - 1 });
131+
this.setData({
132+
currentKey: newIndex - 1,
133+
touchKeyIndex: newIndex - 1,
134+
touchKey: items[newIndex - 1].label,
135+
});
114136
this.onAlphabetClick(items[newIndex - 1], newIndex - 1);
115137
}
116138
},

‎compiled/alipay/src/IndexBar/props.ts

+11-12
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,48 @@
11
import { IBaseProps } from '../_util/base';
22

33
interface ItemObj {
4-
label: string,
5-
disablePreview?: boolean
4+
label: string;
5+
disablePreview?: boolean;
66
}
77

88
export interface IndexBarProps extends IBaseProps {
99
/**
1010
* @description 触发的索引样式
1111
*/
12-
activeClassName: string,
12+
activeClassName: string;
1313
/**
1414
* @description 默认触发的索引
1515
*/
16-
defaultCurrent: string,
16+
defaultCurrent: string;
1717
/**
1818
* @description 触发的索引
1919
*/
20-
current: string,
20+
current: string;
2121
/**
2222
* @description 索引触发时是否震动
2323
*/
24-
vibrate: boolean,
24+
vibrate: boolean;
2525
/**
2626
* @description 索引列表
2727
*/
28-
items: ItemObj[],
28+
items: ItemObj[];
2929
/**
3030
* @description 索引的尺寸
3131
*/
32-
size: number,
32+
size: number;
3333
/**
3434
* @description 触发索引时的回调
3535
*/
36-
onChange: (value: ItemObj, index: number) => void,
36+
onChange: (value: ItemObj, index: number) => void;
3737
}
3838

3939
export const IndexBarDefaultProps: Partial<IndexBarProps> = {
4040
className: '',
4141
activeClassName: '',
42-
defaultCurrent: '',
43-
current: '',
42+
defaultCurrent: null,
4443
vibrate: true,
4544
items: [],
4645
size: 16,
4746
style: '',
4847
onChange: (value, index) => {},
49-
}
48+
};

‎config/config.ts

+4
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,10 @@ const config: IConfig = {
2121
content:
2222
'width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover',
2323
},
24+
{
25+
name: 'google-site-verification',
26+
content: 'kzh4AXx63f3ZC1w2W_k4DWX4L2p_4hRcP5SsRmmMk8k',
27+
},
2428
],
2529
headScripts: [
2630
{

‎demo/pages/IndexBarControl/index.acss

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
.base {
2+
width: 100%;
3+
height: 100vh;
4+
}
5+
.indexbar {
6+
position: fixed;
7+
right: 10px;
8+
top: 20vh;
9+
}

‎demo/pages/IndexBarControl/index.axml

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<view class="base">
2+
<index-bar
3+
className="indexbar"
4+
items="{{items}}"
5+
current="{{current}}"
6+
onChange="onChange">
7+
<view slot-scope="props">
8+
<list header="{{props.value.label}}">
9+
<list-item
10+
a:for="{{nameMap[props.value.label]}}"
11+
a:for-item="itemX">
12+
{{itemX}}
13+
</list-item>
14+
</list>
15+
</view>
16+
</index-bar>
17+
</view>

‎demo/pages/IndexBarControl/index.js

+47
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
const nameMap = {
2+
'A': ['Alice', 'Andy', 'Amanda'],
3+
'B': ['Bob', 'Brian', 'Bella'],
4+
'C': ['Cathy', 'Carl', 'Chris'],
5+
'D': ['David', 'Diana', 'Derek'],
6+
'E': ['Eva', 'Evan', 'Eddie'],
7+
'F': ['Fiona', 'Frank', 'Fred'],
8+
'G': ['George', 'Grace', 'Gavin'],
9+
'H': ['Helen', 'Hank', 'Harry'],
10+
'I': ['Ivy', 'Ian', 'Isaac'],
11+
'J': ['Jack', 'Jill', 'James'],
12+
'K': ['Karen', 'Kyle', 'Kurt'],
13+
'L': ['Laura', 'Liam', 'Leo'],
14+
'M': ['Megan', 'Mike', 'Mona'],
15+
'N': ['Nina', 'Nick', 'Nancy'],
16+
'O': ['Olivia', 'Oscar', 'Owen'],
17+
'P': ['Paul', 'Pam', 'Pete'],
18+
'Q': ['Quincy', 'Quinn', 'Queen'],
19+
'R': ['Rachel', 'Ryan', 'Rita'],
20+
'S': ['Sam', 'Sara', 'Steve'],
21+
'T': ['Tom', 'Tina', 'Tim'],
22+
'U': ['Uma', 'Ulysses', 'Ursula'],
23+
'V': ['Violet', 'Victor', 'Vince'],
24+
'W': ['Wendy', 'Will', 'Wanda'],
25+
'X': ['Xander', 'Xenia', 'Xavier'],
26+
'Y': ['Yara', 'Yuri', 'Yvonne'],
27+
'Z': ['Zoe', 'Zach', 'Zane'],
28+
};
29+
30+
Page({
31+
data: {
32+
nameMap,
33+
items: [],
34+
current: 'S',
35+
},
36+
onLoad() {
37+
this.setData({
38+
items: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('').map((u) => {
39+
return { label: u, disablePreview: true };
40+
}),
41+
});
42+
},
43+
onChange(item, index) {
44+
console.log(item, index);
45+
this.setData({ current: item.label });
46+
},
47+
});

0 commit comments

Comments
 (0)