跳到主要内容

Transfer 穿梭框

双栏穿梭选择框组件，用于在两栏之间移动元素。

何时使用​

  • 需要在两组数据之间进行选择时
  • 需要直观展示选中和未选中项时

代码演示​

基础用法​

import { Transfer } from 'taro-uno';

const dataSource = [
  { key: '1', title: '选项1' },
  { key: '2', title: '选项2' },
  { key: '3', title: '选项3' },
];

function Demo() {
  return (
    <Transfer
      dataSource={dataSource}
      targetKeys={['1']}
      onChange={(keys) => console.log(keys)}
    />
  );
}

带搜索​

import { Transfer } from 'taro-uno';

function Demo() {
  return (
    <Transfer
      dataSource={dataSource}
      showSearch
      filterOption={(input, item) => 
        item.title.includes(input)
      }
    />
  );
}

自定义渲染​

import { Transfer } from 'taro-uno';

function Demo() {
  return (
    <Transfer
      dataSource={dataSource}
      render={(item) => item.title}
    />
  );
}

API​

属性说明类型默认值
dataSource数据源TransferItem[][]
targetKeys右侧框数据的 key 集合string[][]
showSearch是否显示搜索框booleanfalse
disabled是否禁用booleanfalse
titles标题集合[string, string]-
render自定义渲染函数(item: TransferItem) => ReactNode-
onChange选项变化回调(targetKeys: string[]) => void-

平台兼容性​

微信小程序H5React Native鸿蒙
✓✓✓✓