@dfeidao/fd-m000024
v4.6.201909291817
Published
联动滚轮选择器
Downloads
8
Maintainers
Readme
联动滚轮选择器
- 当data数组的长度小于3时,isCyclic循环滚动将不会生效.
- 当本列数组中数据重复时,重复数据的选中项下标相同.
- data数组中的id_field值不能重复.
- ios系统原生picker没有循环滚动属性.
- 如果项目之前在package.json里的导入了@taoqf/react-native-wheel-picker版本需删除,删除node_models并重装依赖.不会对项目代码造成影响.
一、安装
yarn add --dev @dfeidao/fd-m000024
二、属性
属性|描述 --|--|--|-- onItemSelected|返回所有列选中项的下标 selectedItem|初始化选中项默认为第一个,传具体的字符串 data|数据源数组 style|选择器css样式 id_field|数据唯一标识,不能重复 text_field|节点名称 pid_field|数据父节点 visible|模态框是否显示 title|模态框标题 isCyclic|设置循环滚动,ios不支持 selectedItemTextColor|滚轮选中项的字体颜色,ios不支持 selectedItemTextSize|滚轮选中项的字体尺寸,ios不支持 selectedItemTextFontFamily|滚轮选中项的字体样式,ios不支持 itemTextColor|滚轮每一项的字体颜色 itemTextSize|滚轮每一项的字体尺寸 itemTextFontFamily|滚轮每一项的字体样式 indicatorColor|指示器颜色 hideIndicator|隐藏指示器 indicatorWidth|隐藏宽度 backgroundColor|滚轮选择器的背景颜色
三、滚轮选择器示例
3.1 tpl.tsx示例1
data数据里的id_field,text_field,pid_field值需要与其属性保持一致.
import M024 from '@dfeidao/fd-m000024';
import { Text, View } from 'react-native';
export default function tpl(...){
return (
<View>
{/* <Text onPress={(() => {
this.setState({
show:true
});
})}> */}
<Text onPress={a('a002')}>点击</Text>
<M024
title={'滚轮选择器'}
{/* (() => {
this.setState({
show:false
});
})*/}
onCancel={a('a003')}
visible={d('show')}
id_field={'no1'}
text_field={'name1'}
pid_field={'parent1'}
data={[
{ no1: '1', parent1: 'root', name1: 'AAAA' }, { no1: '8', parent1: 'root', name1: '&&&&' },
{ no1: '2', parent1: '0', name1: 'BBBB' }, { no1: '11', parent1: '1', name1: 'CCCC' },
{ no1: '12', parent1: '1', name1: 'DDDD' }, { no1: '111', parent1: '11', name1: 'EEEE' },
{ no1: '112', parent1: '11', name1: 'FFFF' },{ no1: '1231', parent1: '112', name1: 'FFFF1' },
{ no1: '111231232', parent1: '112', name1: 'FFFF2' },{ no1: '1131', parent1: '12', name1: 'GGGG1' },
{ no1: '12313', parent1: '12', name1: 'GGG33' },{ no1: '113', parent1: '8', name1: 'GGG44' }, { no1: '114', parent1: '8', name1: 'GGGG2' },
{ no1: '115', parent1: '8', name1: 'GGGG3' }, { no1: '116', parent1: '8', name1: 'GGGG4' }, { no1: '117', parent1: '113', name1: 'GGGG5' },
{ no1: '12313', parent1: '117', name1: 'GGGG51' }, { no1: '1313', parent1: '117', name1: 'GGGG52' }
]}
onItemSelected={(result) => {
console.log('==result==: ', result);
}}
selectedItem={['&&&&', 'GGG44', 'GGGG5']}
/>
</View>
);
}
3.2 tpl.tsx示例2
当使用d('data')方式传参时需要如下做判断.
import M024 from '@dfeidao/fd-m000024';
import { Text, View } from 'react-native';
export default function tpl(...){
return (
<View>
{/* <Text onPress={(() => {
this.setState({
show:true
});
})}> */}
<Text onPress={a('a002')}>点击</Text>
{(() => {
if (d('data')) {
return (
<M024
title={'滚轮选择器'}
{/* (() => {
this.setState({
show:false
});
})*/}
onCancel={a('a003')}
visible={d('show')}
id_field={'no1'}
text_field={'name1'}
pid_field={'parent1'}
data={d('data')}
onItemSelected={(result) => {
console.log('==result==: ', result);
}}
selectedItem={['&&&&', 'GGG44', 'GGGG5']}
/>
);
}
})()}
</View>
);
}
result
onItemSelected回调返回值
属性|描述 --|--|--|-- extra|用户当前的选中项的数据 no1|该键值通过id_field属性设置,数据唯一标识不能重复 parent1|该键值通过pid_field属性设置,数据的父节点 name1|该键值通过text_field属性设置,数据的名称 index|当前选中项的下标 row|当前选中项,选择器的列
[
{
"extra": {
"no1": "1", "parent1": "root", "name1": "AAAA", "index": 0
},
"index": 0,
"row": 0
},
{
"extra": {
"no1": "11", "parent1": "1", "name1": "CCCC", "index": 0
},
"index": 0,
"row": 1
},
{
"extra": {
"no1": "111", "parent1": "11", "name1": "EEEE", "index": 0
},
"index": 0,
"row": 2
},
{
"extra": {
"no1": "1231", "parent1": "112", "name1": "FFFF1", "index": 0
},
"index": 0,
"row": 3
}
]