Skip to content

Commit 2bc351d

Browse files
byq1213byq1213
committed
feat(picker): 支持点击选择, 无障碍适配. (Tencent#1051)
1 parent 293aee3 commit 2bc351d

File tree

5 files changed

+74
-18
lines changed

5 files changed

+74
-18
lines changed

‎src/picker/_example/base/index.wxml

+6-6
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,21 @@
11
<block>
2-
<view class="pannel-item" bind:tap="onClickPicker" data-key="{{PICKER_KEY.CITY}}">
2+
<label class="pannel-item" bind:tap="onClickPicker" data-key="{{PICKER_KEY.CITY}}" aria-role="button">
33
<view class="pannel-label">城市</view>
44
<view class="pannel-text {{cityValue.length ? '' : 'empty'}}">{{cityCurrentValue || '选择城市'}}</view>
55
<t-icon name="chevron-right" color="rgba(0, 0, 0, 0.26)" size="24px" />
6-
</view>
7-
<view class="pannel-item" bind:tap="onClickPicker" data-key="{{PICKER_KEY.YEAR_SEASONS}}">
6+
</label>
7+
<label class="pannel-item" bind:tap="onClickPicker" data-key="{{PICKER_KEY.YEAR_SEASONS}}" aria-role="button">
88
<view class="pannel-label">年份和季节</view>
99
<view class="pannel-text {{yearSeasonsValue.length ? '' : 'empty'}}">
1010
{{yearSeasonsCurrentValue || '选择年份和季节' }}</view
1111
>
1212
<t-icon name="chevron-right" color="rgba(0, 0, 0, 0.26)" size="24px" />
13-
</view>
14-
<view class="pannel-item last" bind:tap="onClickPicker" data-key="{{PICKER_KEY.DATE}}">
13+
</label>
14+
<label class="pannel-item last" bind:tap="onClickPicker" data-key="{{PICKER_KEY.DATE}}" aria-role="button">
1515
<view class="pannel-label">日期</view>
1616
<view class="pannel-text {{dateValue.length ? '' : 'empty'}}"> {{dateCurrentValue || '选择日期' }}</view>
1717
<t-icon name="chevron-right" color="rgba(0, 0, 0, 0.26)" size="24px" />
18-
</view>
18+
</label>
1919
</block>
2020

2121
<!-- 城市不带标题 -->

‎src/picker/_example/picker.wxml

+13-6
Original file line numberDiff line numberDiff line change
@@ -5,32 +5,39 @@
55
<base />
66
</t-demo>
77
<t-demo desc="带标题选择器">
8-
<view class="pannel-item" bind:tap="onClickPicker" data-key="{{PICKER_KEY.CITY_TITLE}}">
8+
<label class="pannel-item" bind:tap="onClickPicker" data-key="{{PICKER_KEY.CITY_TITLE}}" aria-role="button">
99
<view class="pannel-label">城市</view>
1010
<view class="pannel-text {{cityTitleValue.length ? '' : 'empty'}}"
1111
>{{ cityTitleCurrentValue || '选择城市' }}</view
1212
>
1313
<t-icon name="chevron-right" color="rgba(0, 0, 0, 0.26)" size="24px" />
14-
</view>
15-
<view
14+
</label>
15+
<label
1616
class="pannel-item"
1717
bind:tap="onClickPicker"
1818
data-title="选择年份和季节"
1919
data-key="{{PICKER_KEY.YEAR_SEASONS_TITLE}}"
20+
aria-role="button"
2021
>
2122
<view class="pannel-label">年份和季节</view>
2223
<view class="pannel-text {{yearSeasonsTitleValue.length ? '' : 'empty'}}">
2324
{{ yearSeasonsTitleCurrentValue || '选择年份和季节' }}</view
2425
>
2526
<t-icon name="chevron-right" color="rgba(0, 0, 0, 0.26)" size="24px" />
26-
</view>
27-
<view class="pannel-item" bind:tap="onClickPicker" data-title="选择日期" data-key="{{PICKER_KEY.DATE_TITLE}}">
27+
</label>
28+
<label
29+
class="pannel-item"
30+
bind:tap="onClickPicker"
31+
data-title="选择日期"
32+
data-key="{{PICKER_KEY.DATE_TITLE}}"
33+
aria-role="button"
34+
>
2835
<view class="pannel-label">日期</view>
2936
<view class="pannel-text {{dateTitleValue.length ? '' : 'empty'}}">
3037
{{ dateTitleCurrentValue || '选择日期' }}</view
3138
>
3239
<t-icon name="chevron-right" color="rgba(0, 0, 0, 0.26)" size="24px" />
33-
</view>
40+
</label>
3441
</t-demo>
3542

3643
<!-- 城市带标题 -->

‎src/picker/picker-item.ts

+30
Original file line numberDiff line numberDiff line change
@@ -89,6 +89,36 @@ export default class PickerItem extends SuperComponent {
8989
});
9090
});
9191
},
92+
onTap(e) {
93+
const { index } = e.currentTarget.dataset;
94+
const {
95+
itemHeight,
96+
data: { options, classPrefix },
97+
} = this;
98+
wx.createSelectorQuery()
99+
.in(this)
100+
.select(`#${classPrefix}__group`)
101+
.node()
102+
.exec((res) => {
103+
const scrollView = res[0].node;
104+
scrollView.scrollTo({
105+
top: 0,
106+
});
107+
});
108+
this.setData({
109+
duration: DefaultDuration,
110+
offset: -index * itemHeight,
111+
});
112+
wx.nextTick(() => {
113+
this._selectedIndex = index;
114+
this._selectedValue = options[index]?.value;
115+
this._selectedLabel = options[index]?.label;
116+
this.parent?.triggerColumnChange({
117+
index,
118+
column: this.columnIndex || 0,
119+
});
120+
});
121+
},
92122

93123
// 刷新选中状态
94124
update() {

‎src/picker/picker-item.wxml

+5-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1-
<view
1+
<scroll-view
2+
enhanced="true"
3+
id="{{classPrefix}}__group"
24
style="{{ customStyle }}"
35
class="{{classPrefix}}__group"
46
bind:touchstart="onTouchStart"
@@ -16,8 +18,9 @@
1618
wx:key="index"
1719
wx:for-item="option"
1820
data-index="{{ index }}"
21+
bind:tap="onTap"
1922
>
2023
{{option.label}}
2124
</view>
2225
</view>
23-
</view>
26+
</scroll-view>

‎src/picker/picker.wxml

+20-4
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,27 @@
11
<t-popup visible="{{visible}}" placement="bottom" bind:visible-change="onPopupChange">
2-
<view slot="content" style="{{ customStyle }}" class="{{classPrefix}} {{prefix}}-class">
2+
<view
3+
slot="content"
4+
style="{{ customStyle }}"
5+
class="{{classPrefix}} {{prefix}}-class"
6+
tabindex="-1"
7+
focus="{{true}}"
8+
>
39
<view class="{{classPrefix}}__toolbar" wx:if="{{header}}">
4-
<view class="{{classPrefix}}__cancel {{prefix}}-class-cancel" wx:if="{{cancelBtn}}" bindtap="onCancel"
10+
<view
11+
class="{{classPrefix}}__cancel {{prefix}}-class-cancel"
12+
wx:if="{{cancelBtn}}"
13+
bindtap="onCancel"
14+
aria-role="button"
515
>{{cancelBtn}}</view
616
>
7-
<view class="{{classPrefix}}__title {{prefix}}-class-title">{{title}}</view>
8-
<view class="{{classPrefix}}__confirm {{prefix}}-class-confirm" wx:if="{{confirmBtn}}" bindtap="onConfirm"
17+
<view class="{{classPrefix}}__title {{prefix}}-class-title" focus="{{true}}" aria-label="{{title}}选择框"
18+
>{{title}}</view
19+
>
20+
<view
21+
class="{{classPrefix}}__confirm {{prefix}}-class-confirm"
22+
wx:if="{{confirmBtn}}"
23+
bindtap="onConfirm"
24+
aria-role="button"
925
>{{confirmBtn}}</view
1026
>
1127
</view>

0 commit comments

Comments
 (0)