PickerView组件滚动选择无效（h5）

[lghuahua]

相关平台

H5

复现仓库

https://github.com/lghuahua/暂无.git
浏览器版本: Chrome 122
使用框架: Vue 3

复现步骤

代码

<template>
  <view class="index">
    <button @click="show = true">选择</button>
  </view>
  <nut-popup position="bottom" v-model:visible="show">
    <picker-view
      v-if="show"
      class="phone-picker"
      indicatorStyle="height: 36px;"
      :value="select"
      @change="onChange"
    >
      <picker-view-column>
        <view v-for="item in columns" :key="item" class="picker-item"
          >{{ item }}
        </view>
      </picker-view-column>
    </picker-view>
  </nut-popup>
</template>

<script>
import { ref } from "vue";
import "./index.scss";

export default {
  setup() {
    const columns = ref(["美国", "中国", "巴西", "日本"]);
    const select = ref([]);
    const onChange = (e) => {
      console.log(e.detail.value);
    };
    const show = ref(false);
    return {
      columns,
      select,
      onChange,
      show,
    };
  },
};
</script>
<style lang="scss">
.phone-picker {
  height: 500px;
  font-size: 20px;

  .picker-item {
    height: 72px;
    line-height: 72px;
  }
}
</style>

期望结果

滚动结束能正确选择数据

实际结果

滚动结束后会自动滚动到第一条数据,并且change事件获取的value始终是0

环境信息

➜  myApp git:(master) ✗ taro info
👽 Taro v3.6.28


  Taro CLI 3.6.28 environment info:
    System:
      OS: Linux 6.1 Debian GNU/Linux 12 (bookworm) 12 (bookworm)
      Shell: Unknown
    Binaries:
      Node: 20.9.0 - /usr/local/bin/node
      Yarn: 1.22.19 - /usr/local/bin/yarn
      npm: 9.8.1 - /usr/local/bin/npm
    npmPackages:
      @tarojs/cli: 3.6.28 => 3.6.28 
      @tarojs/components: 3.6.28 => 3.6.28 
      @tarojs/helper: 3.6.28 => 3.6.28 
      @tarojs/plugin-framework-vue3: 3.6.28 => 3.6.28 
      @tarojs/plugin-platform-alipay: 3.6.28 => 3.6.28 
      @tarojs/plugin-platform-h5: 3.6.28 => 3.6.28 
      @tarojs/plugin-platform-jd: 3.6.28 => 3.6.28 
      @tarojs/plugin-platform-qq: 3.6.28 => 3.6.28 
      @tarojs/plugin-platform-swan: 3.6.28 => 3.6.28 
      @tarojs/plugin-platform-tt: 3.6.28 => 3.6.28 
      @tarojs/plugin-platform-weapp: 3.6.28 => 3.6.28 
      @tarojs/runtime: 3.6.28 => 3.6.28 
      @tarojs/shared: 3.6.28 => 3.6.28 
      @tarojs/taro: 3.6.28 => 3.6.28 
      @tarojs/taro-loader: 3.6.28 => 3.6.28 
      @tarojs/webpack5-runner: 3.6.28 => 3.6.28 
      babel-preset-taro: 3.6.28 => 3.6.28 
      eslint-config-taro: 3.6.28 => 3.6.28 
    npmGlobalPackages:
      typescript: 5.2.2

---

补充信息

示例
https://codesandbox.io/p/sandbox/taro-t2hmvd

调试代码发现在 PickerViewColumn里边

  // 滚动结束自动回到合适的位置
  handleSelected = debounce(() => {
    const childList = this.el.childNodes
    let sum = 0
    let selectedIndex: string = '0'
    for (const index in childList) {
      const item = childList[index] as HTMLElement
      const itemHeight = item.offsetHeight
      if (sum   itemHeight / 2.0 > this.el.scrollTop) {
        selectedIndex = index
        break
      }
      sum  = itemHeight
    }

this.el.childNodes会多出两个文本节点，但是审查元素不存在空的文本节点， 这两个文本节点获取offsetHeight为undefind导致sum的值为NaN