[bug]Taro Vue3 微信小程序 TimeSelect 组件，detail和panel高度过高时无法滑动

[v2-lab]

问题描述

Taro Vue3 微信小程序，使用 timeselect 配送时间组件，设置多个可选时间，超过 Popup 高度，无法滑动，timeDetail 和 TimePannel 都存在这个问题。

最小可复现仓库

请创建最小可复现代码，并上传到你的 GitHub 仓库

预期的行为和实际行为

预期行为：可以滚动
实际行为：鼠标可以滚动，滑动 popup 不能滚动

复现步骤，具体代码

<template>
  <view class="roomInfo">
    <view @click="handleTimePicker">请选择面试时间</view>
    <nut-timeselect
      v-model:visible="state.showPopup"
      title="选择时间"
      height="50%"
      :current-key="state.currentDateKey"
      :current-time="state.currentTime"
      @select="handleSelected1"
    >
      <template #pannel>
        <nut-timepannel
          v-for="item in timeList"
          :key="item.key"
          :name="item.key"
          :pannel-key="item.key"
          @change="handleChangeDate"
        ></nut-timepannel>
      </template>
      <template #detail>
        <nut-timedetail
          :times="timeList"
          @select="selectTime1"
        ></nut-timedetail>
      </template>
    </nut-timeselect>
  </view>
</template>

<script setup lang="ts">
import "./index.scss";
import { reactive } from "vue";

const timeList = [
  {
    key: "3月23日（今天）",
    list: [
      "9:00-10:00",
      "10:00-11:00",
      "11:00-12:00",
      "12:00-13:00",
      "13:00-14:00",
      "14:00-15:00",
      "15:00-16:00",
      "16:00-17:00",
      "17:00-18:00",
      "18:00-19:00",
      "19:00-20:00",
      "20:00-21:00",
      "21:00-22:00",
    ],
  },
  {
    key: "3月24日（明天）",
    list: ["12:00-13:00", "13:00-14:00", "14:00-15:00"],
  },
  {
    key: "3月25日（后天）",
    list: ["16:00-17:00", "17:00-18:00", "18:00-19:00"],
  },
  {
    key: "3月26日（后天）",
    list: ["16:00-17:00", "17:00-18:00", "18:00-19:00"],
  },
  {
    key: "3月27日（后天）",
    list: ["16:00-17:00", "17:00-18:00", "18:00-19:00"],
  },
  {
    key: "3月28日（后天）",
    list: ["16:00-17:00", "17:00-18:00", "18:00-19:00"],
  },
  {
    key: "3月29日（后天）",
    list: ["16:00-17:00", "17:00-18:00", "18:00-19:00"],
  },
  {
    key: "3月30日（后天）",
    list: ["16:00-17:00", "17:00-18:00", "18:00-19:00"],
  },
  {
    key: "3月31日（后天）",
    list: ["16:00-17:00", "17:00-18:00", "18:00-19:00"],
  },
];

const state = reactive({
  showPopup: false,
  currentDateKey: timeList[0].key,
  currentTime: [
    {
      key: timeList[0].key,
      list: [],
    },
  ] as Array<{ key: string; list: Array<string> }>,
});

const handleChangeDate = (pannelKey: string) => {
  state.currentDateKey = pannelKey;
  state.currentTime = [
    {
      key: state.currentDateKey,
      list: [],
    },
  ];
};

const handleTimePicker = () => {
  state.showPopup = true;
};

const selectTime1 = (item: string) => {
  const existed = state.currentTime[0]["list"].includes(item);

  if (!existed) {
    state.currentTime[0]["list"] = [item];
  } else {
    state.currentTime[0]["list"] = [];
  }
};

const handleSelected1 = (obj: any) => {
  console.log(JSON.stringify(obj));
};
</script>

弹窗出现后，无法滑动

相关环境信息

• 操作系统：MacOS
• Node 版本：v14.16.0
• NutUI 版本： 3.1.21
• Vue 版本：3.2.24
• 引用方式： NPM

[ayayui]

Dialog 也有这个问题，内容过多时候，无法滚动

[szg2008]

无法滚动的原因是在popup中增加了catch-move。目前的解决办法，视情况而定，如果弹层中的内容需要滚动，那么需要先设置lock-scroll:false。然后在外层手动设置样式禁止滚动。看这里。如果弹层中的内容不需要滚动，那么直接设置lock-scroll:true即可。dialog，timeselect组件可以这样设置。picker，datepicker不需要，因为内部已经绑定了touch事件。timeselect在下一个版本会增加lock-scroll属性。

[v2-lab]

先使用 3.1.20 版本，3.1.20版本没有这个问题

[szg2008]

可以的

[Pentium286]

无法滚动的原因是在popup中增加了catch-move。目前的解决办法，视情况而定，如果弹层中的内容需要滚动，那么需要先设置lock-scroll:false。然后在外层手动设置样式禁止滚动。看这里。如果弹层中的内容不需要滚动，那么直接设置lock-scroll:true即可。dialog，timeselect组件可以这样设置。picker，datepicker不需要，因为内部已经绑定了touch事件。timeselect在下一个版本会增加lock-scroll属性。

menu-item也不能滚动，需要怎么解决

[Pentium286]

设置 lock-scrol 以后会出现 左右滚动的情况