From 2bc351d9982aa086cb157923d42b7a751a334570 Mon Sep 17 00:00:00 2001
From: byqbai <byq1213@qq.com>
Date: Sat, 17 Dec 2022 14:08:47 +0800
Subject: [PATCH] =?UTF-8?q?feat(picker):=20=E6=94=AF=E6=8C=81=E7=82=B9?=
 =?UTF-8?q?=E5=87=BB=E9=80=89=E6=8B=A9,=20=E6=97=A0=E9=9A=9C=E7=A2=8D?=
 =?UTF-8?q?=E9=80=82=E9=85=8D.=20(#1051)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/picker/_example/base/index.wxml | 12 ++++++------
 src/picker/_example/picker.wxml     | 19 ++++++++++++------
 src/picker/picker-item.ts           | 30 +++++++++++++++++++++++++++++
 src/picker/picker-item.wxml         |  7 +++++--
 src/picker/picker.wxml              | 24 +++++++++++++++++++----
 5 files changed, 74 insertions(+), 18 deletions(-)

diff --git a/src/picker/_example/base/index.wxml b/src/picker/_example/base/index.wxml
index 81f358427..5db3177dc 100644
--- a/src/picker/_example/base/index.wxml
+++ b/src/picker/_example/base/index.wxml
@@ -1,21 +1,21 @@
 <block>
-  <view class="pannel-item" bind:tap="onClickPicker" data-key="{{PICKER_KEY.CITY}}">
+  <label class="pannel-item" bind:tap="onClickPicker" data-key="{{PICKER_KEY.CITY}}" aria-role="button">
     <view class="pannel-label">城市</view>
     <view class="pannel-text {{cityValue.length ? '' : 'empty'}}">{{cityCurrentValue || '选择城市'}}</view>
     <t-icon name="chevron-right" color="rgba(0, 0, 0, 0.26)" size="24px" />
-  </view>
-  <view class="pannel-item" bind:tap="onClickPicker" data-key="{{PICKER_KEY.YEAR_SEASONS}}">
+  </label>
+  <label class="pannel-item" bind:tap="onClickPicker" data-key="{{PICKER_KEY.YEAR_SEASONS}}" aria-role="button">
     <view class="pannel-label">年份和季节</view>
     <view class="pannel-text {{yearSeasonsValue.length ? '' : 'empty'}}">
       {{yearSeasonsCurrentValue || '选择年份和季节' }}</view
     >
     <t-icon name="chevron-right" color="rgba(0, 0, 0, 0.26)" size="24px" />
-  </view>
-  <view class="pannel-item last" bind:tap="onClickPicker" data-key="{{PICKER_KEY.DATE}}">
+  </label>
+  <label class="pannel-item last" bind:tap="onClickPicker" data-key="{{PICKER_KEY.DATE}}" aria-role="button">
     <view class="pannel-label">日期</view>
     <view class="pannel-text {{dateValue.length ? '' : 'empty'}}"> {{dateCurrentValue || '选择日期' }}</view>
     <t-icon name="chevron-right" color="rgba(0, 0, 0, 0.26)" size="24px" />
-  </view>
+  </label>
 </block>
 
 <!-- 城市不带标题 -->
diff --git a/src/picker/_example/picker.wxml b/src/picker/_example/picker.wxml
index 6994b3e30..4dc986321 100644
--- a/src/picker/_example/picker.wxml
+++ b/src/picker/_example/picker.wxml
@@ -5,32 +5,39 @@
     <base />
   </t-demo>
   <t-demo desc="带标题选择器">
-    <view class="pannel-item" bind:tap="onClickPicker" data-key="{{PICKER_KEY.CITY_TITLE}}">
+    <label class="pannel-item" bind:tap="onClickPicker" data-key="{{PICKER_KEY.CITY_TITLE}}" aria-role="button">
       <view class="pannel-label">城市</view>
       <view class="pannel-text {{cityTitleValue.length ? '' : 'empty'}}"
         >{{ cityTitleCurrentValue || '选择城市' }}</view
       >
       <t-icon name="chevron-right" color="rgba(0, 0, 0, 0.26)" size="24px" />
-    </view>
-    <view
+    </label>
+    <label
       class="pannel-item"
       bind:tap="onClickPicker"
       data-title="选择年份和季节"
       data-key="{{PICKER_KEY.YEAR_SEASONS_TITLE}}"
+      aria-role="button"
     >
       <view class="pannel-label">年份和季节</view>
       <view class="pannel-text {{yearSeasonsTitleValue.length ? '' : 'empty'}}">
         {{ yearSeasonsTitleCurrentValue || '选择年份和季节' }}</view
       >
       <t-icon name="chevron-right" color="rgba(0, 0, 0, 0.26)" size="24px" />
-    </view>
-    <view class="pannel-item" bind:tap="onClickPicker" data-title="选择日期" data-key="{{PICKER_KEY.DATE_TITLE}}">
+    </label>
+    <label
+      class="pannel-item"
+      bind:tap="onClickPicker"
+      data-title="选择日期"
+      data-key="{{PICKER_KEY.DATE_TITLE}}"
+      aria-role="button"
+    >
       <view class="pannel-label">日期</view>
       <view class="pannel-text {{dateTitleValue.length ? '' : 'empty'}}">
         {{ dateTitleCurrentValue || '选择日期' }}</view
       >
       <t-icon name="chevron-right" color="rgba(0, 0, 0, 0.26)" size="24px" />
-    </view>
+    </label>
   </t-demo>
 
   <!-- 城市带标题 -->
diff --git a/src/picker/picker-item.ts b/src/picker/picker-item.ts
index ec5cbd5e5..6e2c14278 100644
--- a/src/picker/picker-item.ts
+++ b/src/picker/picker-item.ts
@@ -89,6 +89,36 @@ export default class PickerItem extends SuperComponent {
         });
       });
     },
+    onTap(e) {
+      const { index } = e.currentTarget.dataset;
+      const {
+        itemHeight,
+        data: { options, classPrefix },
+      } = this;
+      wx.createSelectorQuery()
+        .in(this)
+        .select(`#${classPrefix}__group`)
+        .node()
+        .exec((res) => {
+          const scrollView = res[0].node;
+          scrollView.scrollTo({
+            top: 0,
+          });
+        });
+      this.setData({
+        duration: DefaultDuration,
+        offset: -index * itemHeight,
+      });
+      wx.nextTick(() => {
+        this._selectedIndex = index;
+        this._selectedValue = options[index]?.value;
+        this._selectedLabel = options[index]?.label;
+        this.parent?.triggerColumnChange({
+          index,
+          column: this.columnIndex || 0,
+        });
+      });
+    },
 
     // 刷新选中状态
     update() {
diff --git a/src/picker/picker-item.wxml b/src/picker/picker-item.wxml
index 2f5b3ee03..3ff79c970 100644
--- a/src/picker/picker-item.wxml
+++ b/src/picker/picker-item.wxml
@@ -1,4 +1,6 @@
-<view
+<scroll-view
+  enhanced="true"
+  id="{{classPrefix}}__group"
   style="{{ customStyle }}"
   class="{{classPrefix}}__group"
   bind:touchstart="onTouchStart"
@@ -16,8 +18,9 @@
       wx:key="index"
       wx:for-item="option"
       data-index="{{ index }}"
+      bind:tap="onTap"
     >
       {{option.label}}
     </view>
   </view>
-</view>
+</scroll-view>
diff --git a/src/picker/picker.wxml b/src/picker/picker.wxml
index 67aff1ad5..a77f07f64 100644
--- a/src/picker/picker.wxml
+++ b/src/picker/picker.wxml
@@ -1,11 +1,27 @@
 <t-popup visible="{{visible}}" placement="bottom" bind:visible-change="onPopupChange">
-  <view slot="content" style="{{ customStyle }}" class="{{classPrefix}} {{prefix}}-class">
+  <view
+    slot="content"
+    style="{{ customStyle }}"
+    class="{{classPrefix}} {{prefix}}-class"
+    tabindex="-1"
+    focus="{{true}}"
+  >
     <view class="{{classPrefix}}__toolbar" wx:if="{{header}}">
-      <view class="{{classPrefix}}__cancel {{prefix}}-class-cancel" wx:if="{{cancelBtn}}" bindtap="onCancel"
+      <view
+        class="{{classPrefix}}__cancel {{prefix}}-class-cancel"
+        wx:if="{{cancelBtn}}"
+        bindtap="onCancel"
+        aria-role="button"
         >{{cancelBtn}}</view
       >
-      <view class="{{classPrefix}}__title {{prefix}}-class-title">{{title}}</view>
-      <view class="{{classPrefix}}__confirm {{prefix}}-class-confirm" wx:if="{{confirmBtn}}" bindtap="onConfirm"
+      <view class="{{classPrefix}}__title {{prefix}}-class-title" focus="{{true}}" aria-label="{{title}}选择框"
+        >{{title}}</view
+      >
+      <view
+        class="{{classPrefix}}__confirm {{prefix}}-class-confirm"
+        wx:if="{{confirmBtn}}"
+        bindtap="onConfirm"
+        aria-role="button"
         >{{confirmBtn}}</view
       >
     </view>