抽屉菜单列表

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

目前列表使用的是FlatList，支持FlatList所有属性

`一、安装`

yarn add @dfeidao/fd-m000011 --dev

`二、属性`

属性	默认值	类型	示例	描述
data	-	Array	data={[{ key: 'a' }, { key: 'b' }]}	列表数据
left_menu	-	function	left_menu={((item) => { return <View style={{}}><Text style={{ width: 100, backgroundColor: 'red', height: 100 }}>item</Text></View>; })}	左侧隐藏的菜单
left_open_value	-	number	left_open_value={100}	和left_menu的宽度保持一直
right_menu	-	function	right_menu={((item) => { return ( <View style={{ backgroundColor: '#4b9dfa', height: 100, width: 100 }}> <Text>{item.txt}</Text> <Button title='button' onPress={() => { Alert.alert('123'); }}></Button> </View> ); })}	右侧隐藏的菜单
right_open_value	-	number	right_open_value={100}	和right_menu的宽度保持一直
body	-	function	body={((item) => {return <View style={{ backgroundColor: '#fff', height: 100, width: '100%', justifyContent: 'center', alignItems: 'center' }}><Text>{JSON.stringify(item)}</Text></View>;})}	列表内容
preview	true	boolean	preview={true}	首行是否应进行滑出预览以显示它是可滑动的
loading_state	无，可选属性	'' \| 'loading' \| 'complete'	loading_state={'loading'}	不设置时不显示底部加载状态。设置为`'loading'`时，表示为`加载中`状态，设置为`'complete'`时，表示为`加载完成`状态
loading_footer	-	Element	见下边示例	`加载中`状态列表底部显示的内容
complete_footer	-	Element	见下边示例	`加载完成`状态列表底部显示的内容

`三、完整示例`

<View>
    <SwipeList
        loading_state={'loading'}
        preview={true}
        data={[{ key: 'a' }, { key: 'b' }]}
        left_open_value={100}
        right_open_value={-100}
        left_menu={((item) => {
            return <View style={{}}><Text style={{ width: 100, backgroundColor: 'red', height: 100 }}>{JSON.stringify(item)}</Text></View>;
        })}
        body={((item) => {
            return <View style={{ backgroundColor: '#fff', height: 100, width: '100%', justifyContent: 'center', alignItems: 'center' }}><Text>{JSON.stringify(item)}</Text></View>;
        })}
        right_menu={(() => {
            return (
                <View style={{ backgroundColor: '#4b9dfa', height: 100, width: 100 }}>
                    <Text>Right</Text>
                    <Button title='button' onPress={() => {
                        Alert.alert('123');
                    }}></Button>
                </View>
            );
        })}
        loading_footer={
            <View style={{ backgroundColor: '#fff', height: 20, alignItems: 'center', justifyContent: 'center' }}><Text style={{ fontSize: 13, color: '#333' }}>正在加载中...</Text></View>
        }
        complete_footer={
            <View style={{ backgroundColor: '#fff', height: 20, alignItems: 'center', justifyContent: 'center' }}><Text style={{ fontSize: 13, color: '#333' }}>已加载全部数据</Text></View>
        }
        onEndReachedThreshold={0.1}
        onEndReached={() => {
            setTimeout(() => {
                this.setState({
                    data: [{ name: 'a' }, { name: 'b' }, { name: 'c' }, { name: 'd' }, { name: 'e' }, { name: 'f' }, { name: 'g' }, { name: 'h' }, { name: 'i' }, { name: 'j' }, { name: 'k' }, { name: 'l' }, { name: 'm' }, { name: 'n' }, { name: 'o' }, { name: 'p' }],
                    loading_state: 'complete'
                });
            }, 500);
        }}
    ></SwipeList>
</View>

Package detail

@dfeidao/fd-m000011

readme

抽屉菜单列表

`一、安装`

`二、属性`

`三、完整示例`