fix(DropdownMenu): auto scroll to current (#1788) (#1981)

* fix(DropdownMenu): auto scroll to current (#1788) * fix(DropdownMenu): resolve auto scroll wrong height (#1788) * fix(DropdownMenu): auto multi scroll to current (#1788)
Tencent · May 11, 2023 · 8b3bc0f · 8b3bc0f
1 parent 3639313
commit 8b3bc0f
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 41 deletions.
diff --git a/src/dropdown-item/dropdown-item.less b/src/dropdown-item/dropdown-item.less
@@ -56,6 +56,10 @@
     }
   }
 
+  &__scroll {
+    max-height: @dropdown-body-max-height;
+  }
+
   &__footer {
     display: flex;
     background: @dropdown-menu-bg-color;

diff --git a/src/dropdown-item/dropdown-item.ts b/src/dropdown-item/dropdown-item.ts
@@ -38,6 +38,7 @@ export default class DropdownMenuItem extends SuperComponent {
     labelAlias: 'label',
     valueAlias: 'value',
     computedLabel: '',
+    firstCheckedValue: '', // 用于多选再次打开自动定位到首个选项
   };
 
   relations: RelationsOptions = {
@@ -133,6 +134,11 @@ export default class DropdownMenuItem extends SuperComponent {
 
       if (!this.data.multiple) {
         this.closeDropdown();
+      } else {
+        const firstChecked = this.data.options.find((item) => value.includes(item.value));
+        if (firstChecked) {
+          this.data.firstCheckedValue = firstChecked.value;
+        }
       }
     },
 
@@ -150,6 +156,8 @@ export default class DropdownMenuItem extends SuperComponent {
     handleConfirm() {
       this._trigger('confirm', { value: this.data.value });
       this.closeDropdown();
+      // 在关闭popup后才自动滚动到首个选项
+      this.setData({ firstCheckedValue: this.data.firstCheckedValue });
     },
 
     onLeaved() {

diff --git a/src/dropdown-item/dropdown-item.wxml b/src/dropdown-item/dropdown-item.wxml
@@ -20,48 +20,50 @@
   >
     <view class="{{classPrefix}}__body">
       <!-- 单选列表 -->
-      <t-radio-group
-        wx:if="{{!multiple}}"
-        class="{{classPrefix}}__radio {{prefix}}-class-column"
-        t-class="{{classPrefix}}__radio-group"
-        style="grid-template-columns: repeat({{optionsColumns}}, 1fr)"
-        value="{{value}}"
-        placement="right"
-        bind:change="handleRadioChange"
-      >
-        <t-radio
-          wx:for="{{options}}"
-          wx:key="index"
-          tabindex="0"
-          icon="line"
-          class="{{classPrefix}}__radio-item {{prefix}}-class-column-item"
-          t-class="radio"
-          t-class-label="{{prefix}}-class-column-item-label"
-          value="{{item[valueAlias]}}"
-          label="{{item[labelAlias]}}"
-          disabled="{{item.disabled}}"
-        ></t-radio>
-      </t-radio-group>
+      <scroll-view wx:if="{{!multiple}}" class="{{classPrefix}}__scroll" scroll-y scroll-into-view="id_{{value}}">
+        <t-radio-group
+          class="{{classPrefix}}__radio {{prefix}}-class-column"
+          t-class="{{classPrefix}}__radio-group"
+          style="grid-template-columns: repeat({{optionsColumns}}, 1fr)"
+          value="{{value}}"
+          placement="right"
+          bind:change="handleRadioChange"
+        >
+          <view wx:for="{{options}}" wx:key="index" id="id_{{item[valueAlias]}}">
+            <t-radio
+              tabindex="0"
+              icon="line"
+              class="{{classPrefix}}__radio-item {{prefix}}-class-column-item"
+              t-class="radio"
+              t-class-label="{{prefix}}-class-column-item-label"
+              value="{{item[valueAlias]}}"
+              label="{{item[labelAlias]}}"
+              disabled="{{item.disabled}}"
+            />
+          </view>
+        </t-radio-group>
+      </scroll-view>
       <!-- 多选列表 -->
-      <t-checkbox-group
-        wx:else
-        class="{{classPrefix}}__checkbox {{prefix}}-class-column"
-        t-class="{{classPrefix}}__checkbox-group"
-        style="grid-template-columns: repeat({{optionsColumns}}, 1fr)"
-        value="{{value}}"
-        bind:change="handleRadioChange"
-      >
-        <block wx:for="{{options}}" wx:key="index">
-          <t-checkbox
-            tabindex="0"
-            class="{{classPrefix}}__checkbox-item {{prefix}}-class-column-item"
-            theme="tag"
-            value="{{item[valueAlias]}}"
-            label="{{item[labelAlias]}}"
-            disabled="{{item.disabled}}"
-          ></t-checkbox>
-        </block>
-      </t-checkbox-group>
+      <scroll-view wx:else class="{{classPrefix}}__scroll" scroll-y scroll-into-view="id_{{firstCheckedValue}}">
+        <t-checkbox-group
+          class="{{classPrefix}}__checkbox {{prefix}}-class-column"
+          t-class="{{classPrefix}}__checkbox-group"
+          style="grid-template-columns: repeat({{optionsColumns}}, 1fr)"
+          value="{{value}}"
+          bind:change="handleRadioChange"
+        >
+          <view wx:for="{{options}}" wx:key="index" id="id_{{item[valueAlias]}}">
+            <t-checkbox
+              tabindex="0"
+              class="{{classPrefix}}__checkbox-item {{prefix}}-class-column-item"
+              theme="tag"
+              value="{{item[valueAlias]}}"
+              label="{{item[labelAlias]}}"
+              disabled="{{item.disabled}}"
+            ></t-checkbox>
+          </view>
+        </t-checkbox-group>
+      </scroll-view>
 
       <slot />
     </view>