基于taro组件scrollView实现pickview

使用 Taro 组件实现基于 ScrollView 的 PickerView 可以按照以下步骤进行：

1. 导入 Taro 相关的组件库和样式：

import Taro, { useState } from '@tarojs/taro'
import { View, ScrollView, PickerView, PickerViewColumn } from '@tarojs/components'

 

 

1. 在函数组件中定义 PickerView 的数据和状态：

function MyPickerView() {
  const [value, setValue] = useState([0, 0, 0]); // 当前选中的索引
  const pickerData = [
    ['选项1', '选项2', '选项3'],
    ['选项A', '选项B', '选项C'],
    ['选项X', '选项Y', '选项Z']
  ];

  const handleChange = e => {
    setValue(e.detail.value);
  };

  return (
    <View>
      <ScrollView scrollY>
        <PickerView value={value} onChange={handleChange}>
          {pickerData.map((item, index) => (
            <PickerViewColumn key={index}>
              {item.map(option => (
                <View key={option}>{option}</View>
              ))}
            </PickerViewColumn>
          ))}
        </PickerView>
      </ScrollView>
    </View>
  );
}

export default MyPickerView;

 

 

1. 在需要的地方引入 MyPickerView 组件并使用：

import Taro from '@tarojs/taro'
import { View } from '@tarojs/components'
import MyPickerView from './MyPickerView'

function App() {
  return (
    <View>
      <MyPickerView />
    </View>
  );
}

export default App;

 

 

通过以上步骤，你可以在 Taro 应用中使用 ScrollView 和 PickerView 组件来实现一个基于 PickerView 的选择器，用户可以在垂直滚动中进行选择。