Browse Source

fix(menu): menu list cannot be scrolled #1615 (#1633)

Drjingfubo 3 years ago
parent
commit
508f84c8cd

+ 3 - 1
src/packages/__VUE/menuitem/index.scss

@@ -16,9 +16,11 @@
 .nut-menu-item__content {
   padding: $menu-item-content-padding;
   max-height: $menu-item-content-max-height;
-  overflow-y: auto;
   display: flex;
   flex-wrap: wrap;
+  &.nut-menu-item__overflow {
+    overflow-y: auto;
+  }
 
   .nut-menu-item__option {
     color: $title-color;

+ 29 - 21
src/packages/__VUE/menuitem/index.taro.vue

@@ -26,30 +26,38 @@
       @closed="handleClose"
       :close-on-click-overlay="parent.props.closeOnClickOverlay"
     >
-      <view class="nut-menu-item__content">
-        <view
-          v-for="(option, index) in options"
-          :key="index"
-          class="nut-menu-item__option"
-          :class="[{ active: option.value === modelValue }]"
-          :style="{ 'flex-basis': 100 / cols + '%' }"
-          @click="onClick(option)"
-        >
-          <nut-icon
-            :class="{ activeTitleClass: option.value === modelValue, inactiveTitleClass: option.value !== modelValue }"
-            v-if="option.value === modelValue"
-            :name="optionIcon"
-            v-bind="$attrs"
-            :color="parent.props.activeColor"
-          ></nut-icon>
+      <scroll-view :scroll-y="true" style="height: 100%">
+        <view class="nut-menu-item__content">
           <view
-            :class="{ activeTitleClass: option.value === modelValue, inactiveTitleClass: option.value !== modelValue }"
-            :style="{ color: option.value === modelValue ? parent.props.activeColor : '' }"
-            >{{ option.text }}</view
+            v-for="(option, index) in options"
+            :key="index"
+            class="nut-menu-item__option"
+            :class="[{ active: option.value === modelValue }]"
+            :style="{ 'flex-basis': 100 / cols + '%' }"
+            @click="onClick(option)"
           >
+            <nut-icon
+              :class="{
+                activeTitleClass: option.value === modelValue,
+                inactiveTitleClass: option.value !== modelValue
+              }"
+              v-if="option.value === modelValue"
+              :name="optionIcon"
+              v-bind="$attrs"
+              :color="parent.props.activeColor"
+            ></nut-icon>
+            <view
+              :class="{
+                activeTitleClass: option.value === modelValue,
+                inactiveTitleClass: option.value !== modelValue
+              }"
+              :style="{ color: option.value === modelValue ? parent.props.activeColor : '' }"
+              >{{ option.text }}</view
+            >
+          </view>
+          <slot></slot>
         </view>
-        <slot></slot>
-      </view>
+      </scroll-view>
     </nut-popup>
   </view>
 </template>

+ 1 - 1
src/packages/__VUE/menuitem/index.vue

@@ -27,7 +27,7 @@
       :isWrapTeleport="false"
       :close-on-click-overlay="parent.props.closeOnClickOverlay"
     >
-      <view class="nut-menu-item__content">
+      <view class="nut-menu-item__content nut-menu-item__overflow">
         <view
           v-for="(option, index) in options"
           :key="index"