FlatList拖拽列表

https://dfeidao.gitee.io/widgets-mobile/

Installation

yarn add --dev @dfeidao/fd-m000023

Attributes

属性 | 描述 | 示例 -----|------|----- renderItem | 每个FlatList容器的样式模板 | renderItem的参数是一个对象，具有item, index, is_active属性。item为渲染使用的其中一条数据，index为数组下标, is_active表示当前是否处于拖拽状态。注意：渲染的子项外层请不要是使用TouchableOpacity标签，否则会影响拖动效果 data | 数据源 onMoveEnd | 拖拽完成触发的事件 onPress | 行点击事件

Example

初始化事件a001

import { IFeidaoAiMobile } from '@dfeidao/atom-mobile/interfaces';
import render from '@dfeidao/atom-mobile/render/render';

export default function a001(fd: IFeidaoAiMobile, e: any) {
	render(fd,
		{
			data: [...Array(7)].map((_, index) => ({
				backgroundColor: '#fff',
				label: index
			}))
		}
	);
}

onMoveEnd事件a002

import { IFeidaoAiMobile } from '@dfeidao/atom-mobile/interfaces';
import render from '@dfeidao/atom-mobile/render/render';

export default function a002(fd: IFeidaoAiMobile, e: {param: {data: unknown[]}}) {
	const data = param.data;
	render(fd,
		{
			data
		}
	);
}

tpl

import M023 from '@dfeidao/fd-m000023';

export default function tpl(a: <T>(action: string, ...args: unknown[]) => ((...args: unknown[]) => void), s: (...class_names: string[]) => {}, d: <T>(d: string) => T, fd: IFeidaoAiMobile) {
	return (
		<M023
			renderItem={({ item, index, is_active }) => {
				const _item = item as {
					backgroundColor: string;
					label: string;
				};
				return (
					<View style={{
						alignItems: 'center',
						backgroundColor: is_active ? '#6c67ff' : item.backgroundColor, // isActived长按选中后拖拽颜色变为蓝色
						borderRadius: 5,
						height: 100,
						justifyContent: 'center',
						marginBottom: 10,
						marginLeft: 15,
						marginRight: 15
					}}>
						<Text style={{
							color: '#333',
							fontSize: 32,
							fontWeight: 'bold',

						}}>
							{_item.label}
						</Text>
					</View>
				);
			}}
			data={d(data)}
			onPress={({ item, index，is_active }) => {
				console.log(item, index，is_active);
			}}
			onMoveEnd={a('a002')}
		/>
	)
}