相关平台

H5
部分安卓机型，目前
小米RedmiNote 11Pro 、OPPO Reno7 、OPPO-R15 、VIVO IQOO 、 vivo Y70t 、 vivo Y76s均出现该问题。可能为安卓机的微信浏览器共性问题。
录屏手机为RedmiNote 11Pro

浏览器版本: 微信浏览器
使用框架: React

复现步骤

1. 在demo中编写picker示例代码
2. 在微信中扫码打开H5页面
3. 点击picker弹出选项，用手滑动选项带动整个页面滑动，回弹后大概率选中行会出现在选项和选项之间，这时点击确定，onChange回调中选中的值为空
   demo页面代码

import React from 'react';
import Taro from '@tarojs/taro'
import { Picker, View } from '@tarojs/components';

export default class Index extends React.Component {
  public constructor(props) {
    super(props);

    this.state = {
      selector: ['中国', '美国', '巴西', '日本'],
      multiSelector: [['饭', '粥', '粉'], ['猪肉', '牛肉']],
      selectorValue: 0,
      mulitSelectorValues: [0, 1],
      timeSel: '',
      dateSel: '',
    };
  }
  handleChange = e => {
    this.setState({
      selectorValue: e.detail.value
    })
    Taro.showModal({
      title: "选中",
      content: '选中项为' + e.detail.value
    })
  }

  handleMulitChange = e => {
    this.setState({
      mulitSelectorValues: e.detail.value
    })
    Taro.showModal({
      title: "选中",
      content: '选中项为' + e.detail.value
    })
  }

  private handleTimeChange = (e): void => {
    this.setState({
      timeSel: e.detail.value
    });
    Taro.showModal({
      title: "选中",
      content: '选中项为' + e.detail.value
    })
  };

  private handleDateChange = (e): void => {
    this.setState({
      dateSel: e.detail.value
    });
  };
  public render(): JSX.Element {
    const {
      selector,
      selectorValue,
      multiSelector,
      mulitSelectorValues,
      timeSel,
      dateSel
    } = this.state;

    return (
      <View className='page picker__page'>
        <View className='doc-body'>
          {/* 单选选择 */}
          <View className='panel--none'>
            <View className='panel__content no-padding'>
              <View className='example-item--picker'>
                <Picker mode='selector' range={selector} onChange={this.handleChange} value={selectorValue}>
                  点我打开单项选择
                </Picker>
                选中项为{selector[selectorValue]}
              </View>
            </View>
          </View>
          {/* 联级选择 */}
          <View className='panel--none'>
            <View className='panel__content no-padding'>
              <View className='example-item--picker'>
                <Picker mode='multiSelector' range={multiSelector} onChange={this.handleMulitChange} value={mulitSelectorValues}>
                  点我打开多项
                </Picker>
                选中项为{mulitSelectorValues.map((k,i) => multiSelector[i][k]).join()}
              </View>
            </View>
          </View>
          {/* taro日期/时间选择器 */}
          <View className='panel--none'>
            <View className='panel__content no-padding'>
              {/* 日期选择 */}
              <View className='example-item--date'>
                <Picker
                  mode='date'
                  value={dateSel}
                  onChange={this.handleDateChange.bind(this)}
                >
                  点我打开日期选择
                </Picker>
                选中项为{dateSel}
              </View>
              {/* 时间选择 */}
              <View className='example-item--picker'>
                <Picker
                  mode='time'
                  value={timeSel}
                  onChange={this.handleTimeChange.bind(this)}
                >
                  点我打开时间选择
                </Picker>
                选中项为{timeSel}
              </View>

            </View>
          </View>

        </View>
      </View>
    );
  }
}

期望结果

无论怎么滑动，选中行都应该是列表中的项，且值不能为空

实际结果

选中行会出现在选项和选项之间，这时点击确定，onChange回调中选中的值不正常，本应该返回选中项下标的回返回小数，日期模式下返回的日期为空
Screenrecorder-2023-05-10-14-36-01-990.mp4

环境信息

👽 Taro v3.6.6

  Taro CLI 3.6.6 environment info:
    System:
      OS: Windows 10 10.0.19044
    Binaries:
      Node: 14.18.1 - C:\Program Files\nodejs\node.EXE
      Yarn: 1.22.11 - ~\AppData\Roaming\npm\yarn.CMD
      npm: 6.14.1 - C:\Program Files\nodejs\npm.CMD
    npmPackages:
      react: ^18.0.0 => 18.2.0