# @dfeidao/fd-m000025

> 滚轮选择器

Latest version **4.6.201909291817** (published 2019-09-29) · MIT license · 0 weekly downloads

## Install

```sh
npm install @dfeidao/fd-m000025
pnpm add @dfeidao/fd-m000025
yarn add @dfeidao/fd-m000025
bun add @dfeidao/fd-m000025
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 4.6.201909291817 |
| Published | 2019-09-29 |
| First published | 2019-09-18 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 16.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | yes |
| Author | 高塬 |
| Maintainers | taoqf |
| Keywords | feidao, 01feidao, dfeidao, atom, 飞道, 控件, ai |

## Links

- npm: https://www.npmjs.com/package/@dfeidao/fd-m000025
- Repository: https://gitee.com/dfeidao/widgets-mobile
- npm.io page: https://npm.io/package/@dfeidao/fd-m000025

## Dependencies (1)

- [@taoqf/react-native-wheel-picker](https://npm.io/package/@taoqf/react-native-wheel-picker.md) 1.0.6

## Alternatives

- [@expo/fingerprint](https://npm.io/package/@expo/fingerprint.md) — 6.2M weekly downloads
- [@azure/monitor-opentelemetry-exporter](https://npm.io/package/@azure/monitor-opentelemetry-exporter.md) — 850.0K weekly downloads
- [@azure/monitor-opentelemetry](https://npm.io/package/@azure/monitor-opentelemetry.md) — 624.0K weekly downloads
- [@posthog/ai](https://npm.io/package/@posthog/ai.md) — 423.3K weekly downloads
- [fakefilter](https://npm.io/package/fakefilter.md) — 63.9K weekly downloads

## Recent versions

- 4.6.201909291817 (latest) — 2019-09-29
- 4.6.201909291815 — 2019-09-29
- 4.6.201909181757 — 2019-09-18
- 4.6.201909181615 — 2019-09-18

## README

# 滚轮选择器

>1. 当data数组的长度小于3时,isCyclic循环滚动将不会生效.
>2. 当本列数组中数据重复时,重复数据的选中项下标相同.
>3. ios系统原生picker没有循环滚动属性.
>4. 如果项目之前在package.json里的导入了@taoqf/react-native-wheel-picker版本需删除,删除node_models并重装依赖.不会对项目代码造成影响.

## 一、安装

```shell
yarn add --dev @dfeidao/fd-m000025
```

## 二、属性

属性|描述
--|--|--|--
onItemSelected|返回所有列选中项的下标
data|数据源数组
selectedItem|初始化选中项默认为第一个,传具体的字符串
style|选择器css样式
visible|模态框是否显示
title|模态框标题
isCyclic|设置循环滚动,ios不支持该属性
selectedItemTextColor|滚轮选中项的字体颜色,ios不支持
selectedItemTextSize|滚轮选中项的字体尺寸,ios不支持
selectedItemTextFontFamily|滚轮选中项的字体样式,ios不支持
itemTextColor|滚轮每一项的字体颜色
itemTextSize|滚轮每一项的字体尺寸
itemTextFontFamily|滚轮每一项的字体样式
indicatorColor|指示器颜色
hideIndicator|隐藏指示器
indicatorWidth|隐藏宽度
backgroundColor|滚路选择器的背景颜色

## 三、滚轮选择器示例

### 3.1 tpl.tsx示例1

```tsx
import M025 from '@dfeidao/fd-m000025';
import { Text, View } from 'react-native';

export default function tpl(...){
	return (
	<View>
			{/* <Text onPress={(() => {
				this.setState({
					show:true
				});
			})}> */}
			<Text onPress={a('a002')}>点击</Text> 
			<M025
				title={'滚轮选择器'}
				{/* (() => {
					this.setState({
						show:false
					});
				})*/}
				onCancel={a('a003')}
				visible={d('show')}
		    	data={[['0','1','2'], ['a','b','c'], ['33','22','11']]}
				onItemSelected={((result) => {
						console.log(result);
					})}
				selectedItem={['0', 'b', '11']}
				/>
		</View>
	);
}
```

### 3.2 tpl.tsx示例2

>当使用d('data')方式传递数据时需要如下做判断.

```tsx
import M025 from '@dfeidao/fd-m000025';
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 (
            			<M025
              				title={'滚轮选择器'}
              				onCancel={a('a003')}
              				visible={d('show')}
              				data={d('data')}
              				onItemSelected={((result) => {
                				console.log(result);
              				})}
              				selectedItem={['0', 'b', '11']}
            			/>
          					);
						}
      			})()}
		</View>
	);
}
```

## result

### onItemSelected回调返回值

属性|描述
--|--|--|--
extra|用户当前的选中项的数据
name|当前选中项的名称
index|当前选中项的下标
row|当前选中项,选择器的列

```json
[
	{
	"extra": {
		"name": "0",  "index": 0
	},
	"index": 0,
		"row": 0
},
{
	"extra": {
		"name": "b", "index": 1
	},
	"index": 0,
	    "row": 1
},
{
	"extra": {
		"name": "11", "index": 2
	},
	"index": 0,
		"row": 2
}
]
```

---
_Source: https://npm.io/package/@dfeidao/fd-m000025 · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._