4.6.201908201054 • Published 5 years ago
@dfeidao/fd-m000023 v4.6.201908201054
FlatList拖拽列表
https://dfeidao.gitee.io/widgets-mobile/
Installation
yarn add --dev @dfeidao/fd-m000023Attributes
| 属性 | 描述 | 示例 |
|---|---|---|
| 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')}
/>
)
}